javascript - 如果鼠标不移动,输入中的 OnChange 不会触发

标签 javascript html input

这是我的代码示例

<html>
<script>
function onKeyUpEstimatedHoursInput() {
  console.log("onKeyUpEstimatedHoursInput - 1");
}
function onKeyPressEstimatedHoursInput() {
  console.log("onKeyPressEstimatedHoursInput - 1");
}
function onChangeEstimatedHoursInput() {
  console.log("onChangeEstimatedHoursInput - 1");
}
</script>

<input type="number" onchange="onChangeEstimatedHoursInput();" onkeypress="onKeyPressEstimatedHoursInput();" onkeyup="onKeyUpEstimatedHoursInput();" step="0.01">
</html>

问题是,如果您单击“增加值”或“减少值”按钮 enter image description here

仅当您第一次单击它时才会触发。
在屏幕截图中,我点击了 20 次。但鼠标移动了两次。代码第一次写入日志,然后是移动鼠标后第一次写入日志。
浏览器 - Chrome、Firefox (Win7)。

问题:如何获得所有点击?

最佳答案

事实上,在 Chrome 中,某些点击似乎不会生成 change 事件。我无法在 FireFox 中重现它。

但是还有一个事件不需要焦点离开输入区域:input。这总是会触发任何 I/O 方式来更改输入内容:上/下按钮、鼠标拖/放、键盘、上下文菜单、其他不寻常的输入设备...

function onInput() {
  console.log("onInput");
}
<input type="number" oninput="onInput();" step="0.01">

关于javascript - 如果鼠标不移动,输入中的 OnChange 不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45886928/

相关文章:

javascript - 如何仅通过 JavaScript 播放视频?

javascript - 像以前一样重置动态表单

python - 在 Python 2 中创建 input() 背后的基本原理是什么?

javascript - 超出最大堆栈大小

javascript - 使弹出模式对话框在出现后可移动/可拖动

javascript - svg 路径 css 动画暂停,jquery 运行

javascript - 将边框半径包含在 javascript 中时不起作用

c# - 将 VirtualKey 映射到 UWP 应用程序中的字符,独立于布局

java - Java中特定的字符串输入

javascript -> 高度的平滑滚动效果(视差效果)