时间戳

首页 > 解决方案 > 为什么输入行为会这样工作？

html - 为什么输入行为会这样工作？

问题描述

在这支笔中，有一个带有.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>

有趣的行为是，如果您在按下“向上”或“向下”箭头时不移动鼠标，事件处理程序将不会触发。箭头很小，每次按下它都不容易移动鼠标，但试一试，你会发现处理程序不会每次都触发，导致序列 fe 4 (click up) -> 5(click up ，鼠标未移动）- 5（单击，相同）- 5（单击，相同）- 8（单击，鼠标移动，触发器工作）

即使鼠标没有移动，如何触发处理程序，为什么它会这样工作？

标签： htmlcsseventsinput

解决方案

tl，博士；使用input事件。

事件实现的目的input是超越必须根据<input>类型和使用的输入方法（键盘、指针、触摸或设备相关）进行不同的侦听。

当、或元素的值被更改时， DOMinput事件会同步触发。该事件也适用于启用的元素，以及打开时的任何元素。<input><select><textarea>contenteditabledesignMode

当您使用 internal.stepUp()和.stepDown()的方法时type="number"，即使它们更新了 的值，input它们并不总是触发change事件。
当您按住向上或向下箭头键并且值不断变化时（或者当您将鼠标按住箭头而不释放时），这很容易观察到。拖动a的句柄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活动文档在这里。

推荐阅读