Question

这支笔中有一个带有.on('change')（或键控）事件处理程序的输入元素，该事件处理程序将输入值打印到

$('#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

如果我理解正确，您想立即更改输入的输出。仅在输入完成后才触发change事件。您需要使用keyup事件刷新每个输入的输出。

选中https://codepen.io/anon/pen/zeGeVY

Answer 2

tl，dr; 使用input事件。

input事件实现的目的是超越必须基于<input>类型和所使用的输入方法（与键盘，指针，触摸或设备有关的输入）进行不同的监听。

当input，<input>或<select>元素的值被更改时，DOM <textarea>事件将同时触发。该事件还适用于启用了contenteditable的元素，以及启用了designMode的任何元素。

当您使用内部.stepUp()的{{1}}和.stepDown()方法时，即使它们更新type="number"的值，它们也不总是触发{ {1}}事件。
当您按住向上或向下箭头键并且值不断变化时（或者在不松开鼠标的情况下按住箭头），这很容易观察到。拖动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 }事件documentation here。

为什么输入行为是这样的？

2 个答案: