怎样实现input输入非数字不显示值并且每次输入数字进行计算逻辑？

Question

看到一个文本框，如果你输入的是非数字，input什么的都不会显示，当你输入数字时进行计算，
（当输入汉字什么都不显示，输入1，马上进行计算，再输入1，进行计算）

Answer 1

这个要分2步走

控制只能输入数字，捕捉keydown事件，查keycode对照表，只允许数字、小键盘数字、删除、退格，剩下的统统preventDefault
输入数字后进行计算，捕捉keyup事件，value发生变化，或者满足上一个keydown事件的条件，进行计算逻辑

要分2步的原因，keydown发生时，新的按键还未使value发生变化，所以不应该进行计算逻辑，而keyup发生时，新的按键已使value发生变化，阻止默认事件已经来不及了，退格、删除什么的也不保险，还有可能进入输入法，问题很多，所以不能在这里过滤keycode

Answer 2

像这个react-format-number？

Answer 3

你可以写个filter，过滤你的输入，如果判断是数字，就给input的value赋值，否则就无视它~

Answer 4

可直接在输入的时候强制转换类型

Answer 5

可以在输入的时候进行判断，例如

var input = $("#input1").val(); // 类型转化
// 非数值的会被'+'转换成NaN
// NaN !== NaN  true
// 过滤输入框为空的情况
if( +input !== +input && typeof +input === 'number' && input !== '') {
  // do something
} else {
  $("#input1").val('');    // 输入框始终置为空
}

Answer 6

题主描述的情况是因为用了 HTML5 Forms 里定义的 <input type="number">，目前好像只有 Chrome 支持。如何通过代码去兼容其他浏览器是另外一回事。另外，就算代码能过滤掉无效字符，也无法在行为上与支持那个属性的浏览器一致。