扫码关注官方订阅号
看到一个文本框,如果你输入的是非数字,input什么的都不会显示,当你输入数字时进行计算,(当输入汉字什么都不显示,输入1,马上进行计算,再输入1,进行计算)
欢迎选择我的课程,让我们一起见证您的进步~~
这个要分2步走
控制只能输入数字,捕捉keydown事件,查keycode对照表,只允许数字、小键盘数字、删除、退格,剩下的统统preventDefault输入数字后进行计算,捕捉keyup事件,value发生变化,或者满足上一个keydown事件的条件,进行计算逻辑
要分2步的原因,keydown发生时,新的按键还未使value发生变化,所以不应该进行计算逻辑,而keyup发生时,新的按键已使value发生变化,阻止默认事件已经来不及了,退格、删除什么的也不保险,还有可能进入输入法,问题很多,所以不能在这里过滤keycode
像这个react-format-number?
你可以写个filter,过滤你的输入,如果判断是数字,就给input的value赋值,否则就无视它~
可直接在输入的时候强制转换类型
可以在输入的时候进行判断,例如
var input = $("#input1").val(); // 类型转化 // 非数值的会被'+'转换成NaN // NaN !== NaN true // 过滤输入框为空的情况 if( +input !== +input && typeof +input === 'number' && input !== '') { // do something } else { $("#input1").val(''); // 输入框始终置为空 }
题主描述的情况是因为用了 HTML5 Forms 里定义的 <input type="number">,目前好像只有 Chrome 支持。如何通过代码去兼容其他浏览器是另外一回事。另外,就算代码能过滤掉无效字符,也无法在行为上与支持那个属性的浏览器一致。
<input type="number">
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
这个要分2步走
控制只能输入数字,捕捉keydown事件,查keycode对照表,只允许数字、小键盘数字、删除、退格,剩下的统统preventDefault
输入数字后进行计算,捕捉keyup事件,value发生变化,或者满足上一个keydown事件的条件,进行计算逻辑
要分2步的原因,keydown发生时,新的按键还未使value发生变化,所以不应该进行计算逻辑,而keyup发生时,新的按键已使value发生变化,阻止默认事件已经来不及了,退格、删除什么的也不保险,还有可能进入输入法,问题很多,所以不能在这里过滤keycode
像这个react-format-number?
你可以写个filter,过滤你的输入,如果判断是数字,就给input的value赋值,否则就无视它~
可直接在输入的时候强制转换类型
可以在输入的时候进行判断,例如
题主描述的情况是因为用了 HTML5 Forms 里定义的
<input type="number">
,目前好像只有 Chrome 支持。如何通过代码去兼容其他浏览器是另外一回事。另外,就算代码能过滤掉无效字符,也无法在行为上与支持那个属性的浏览器一致。