Прослушиватель событий HTML5 для прокрутки ввода чисел - только в Chrome

#jquery #html #google-chrome #event-handling

#jquery #HTML #google-chrome #обработка событий

Вопрос:

Я поиграл с некоторыми элементами HTML5 и столкнулся с забавным поведением. Это работает только в Chrome.

Используя тип ввода числа, вы можете установить минимальное, максимальное значение и шаг, а также использовать стрелки вверх и вниз для управления вводом. <input type="number" min="0" max="100" step="5" />

Я обнаружил, что привязка прослушивателя событий щелчка фиксирует нажатия на стрелки, поскольку изменение фактически не произойдет, пока поле не будет размыто. Вы также можете использовать клавиши со стрелками вверх и вниз на клавиатуре, чтобы изменить значение в пределах ограничений, и привязка к нажатию клавиши может их обнаружить.

Однако в Chrome вы также можете использовать колесико мыши для изменения ввода, наведя курсор на ввод и прокручивая. Однако я не смог найти способ прослушивания этого события.

Пример в jsfiddle

HTML:

 <input type="number" min="0" max="100" step="5" id="test" />

JavaScript (с использованием jQuery):

 $( '#test' ).click(function(){
   $( this ).after( '<br />click' ); 
});

$( '#test' ).change(function(){
   $( this ).after( '<br />change' ); 
});

$( '#test' ).keypress(function(){
   $( this ).after( '<br />keypress' ); 
});

Есть идеи о том, как прослушивать это изменение прокрутки? Опять же, на момент написания этой статьи это работает только в Chrome.

1. Хотя это и не ответ на ваш вопрос, вы также можете рассмотреть возможность отслеживания изменений значения с помощью цикла setTimeout, заменяющего все обработчики событий. Не очень высокая производительность, но работает с любым методом ввода.

2. Это бы полностью сработало. Даже просто запустите таймер при фокусировке и отключите его при размытии. Такой крайний случай, я не собираюсь беспокоиться об этом на производстве, но мне было любопытно теоретическое значение.

3. FWIW — похоже, что chrome теперь запускает событие изменения при прокрутке поля ввода чисел или нажатии кнопок увеличения.

Ответ №1:

Плагин jQuery Mouse Wheel, похоже, справляется с задачей. http://plugins.jquery.com/project/mousewheel

 $( '#test' ).mousewheel(function(){
   $( this ).after( '<br />mouse wheel' ); 
});

1. Я раздвоил jsFiddle операционной системы с помощью этого плагина , показывая ваше решение

2. хотя jQuery не поддерживает его из коробки, и если вы не хотите импортировать плагин каждый раз, когда отсутствует функция, вы можете просто использовать ванильный прослушиватель $('#test')[0].addEventListener('mousewheel', function(){ $('#test').after( '<br />scroll' ); });