почему поведение ввода работает так?

Question

В этой ручке есть элемент ввода с обработчиком событий .on('change') (или keyup), который печатает входное значение в

$('#input-1').on('change', function() {
  $('.output').text($(this).val());
})

.output {
  border: 1px solid purple;
  margin: 10%
}

#input-1 {
  height: 30px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="input-1" type="number">
<div class="output"></div>

Интересно, что если вы не двигаете мышь, когда нажатие стрелки вверх или вниз, обработчик событий стрелки не сработает. Стрелки маленькие, и нелегко не перемещать мышь при каждом нажатии, а просто попробовать, и вы увидите, что обработчик не будет запускаться каждый раз, приводя к последовательностям f.e. 4 (клик вверх) -> 5 (клик вверх, мышь не перемещена) - 5 (клик вверх, тоже самое) - 5 (клик вверх, то же самое) - 8 (клик вверх, мышь перемещена, триггер сработал)

Как вызвать обработчик, даже если мышь не двигается и почему он работает так?

Answer 1

tl, др .; использовать событие input.

Цель реализации события input состоит в том, чтобы превзойти необходимость прослушивания по-разному в зависимости от типа <input> и в зависимости от используемого метода ввода (клавиатура, указатель, касание или в зависимости от устройства).

---

Событие DOM input происходит синхронно, когда значение элемента <input>, <select> или <textarea> было изменено. Событие также применяется к элементам с включенным contenteditable и к любому элементу, когда включен designMode.

Когда вы используете внутренние .stepUp() и .stepDown() методы type="number", даже если они обновляют значение input, они не всегда вызывают событие change.
Это легко заметить, когда вы нажимаете клавиши со стрелками вверх или вниз, а значение постоянно меняется (или когда вы удерживаете мышь нажатой на стрелке, не отпуская ее). Это также случай перетаскивания ручки type="range" <input> (без отпускания). Событие change срабатывает только при отпускании дескриптора, но input срабатывает при каждом изменении значения.

Ваш обновленный пример:

$('#input-1').on('input', function() {
  $('.output').text($(this).val());
})

.output {
  border: 1px solid purple;
  margin: 10%
}

#input-1 {
  height: 30px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="input-1" type="number">
<div class="output"></div>

input событие документация здесь .

Answer 2

Если я правильно понял, вы хотите мгновенно изменить выходной сигнал.Событие change вызывается только после завершения ввода.Вам необходимо использовать событие keyup для обновления вывода на каждом отдельном входе.

Проверка https://codepen.io/anon/pen/zeGeVY