javascript - html5 类型 ="number"工作如此缓慢

Question

当我们改变输入值时，我会把这个值扔到控制台。

$(function(){
  $('#a, #b').change(function(){
    console.log($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="1">
<input type="text" id="b" value="1">

尝试:踩/按 type=number 几次。

结果:对于 type=number 浏览器挂起一段时间(超过 1 秒)，但对于 type=text 它立即发生

预期:耗时相同。即使是几毫秒(不到 1 秒)也可以。

可能的原因是type=number先验证/解析输入，所以花费了更多的时间。但是为什么要这么久，甚至挂掉我的浏览器？？

Answer 1

您可以使用 .on() 和 input 触发器解决问题，如下所示。似乎 change() 没有很好地触发输入 type=number 向上和向下按钮。

$(function(){
  $('#a, #b').on("input",function(){
    console.log($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="1">
<input type="text" id="b" value="1">