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


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

jquery web前端开发 HTML css JavaScript

粤漫三色堇 8 years, 9 months ago

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

某龙。。 answered 8 years, 9 months ago

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


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

拯救大姨妈 answered 8 years, 9 months ago

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

4539244 answered 8 years, 9 months ago

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

花生马里奥 answered 8 years, 9 months ago

像这个 react-format-number

lu——舞 answered 8 years, 9 months ago

这个要分2步走

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

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

耀DMare answered 8 years, 9 months ago

Your Answer