网上找了很多代码,基本上都是相同的效果,就是当输入负号的时候,会把所有的内容全部置空,这种效果对用户的体验是很不好的。万一,用户不小心输错了,然后又得全部重新输入一遍。
最后我去网上参考了很多关于输入框事件的知识,最后整理出来了一种最佳的方法,处理不允许输入负数,欢迎点赞评论。
代码:
<input type="number" onkeypress="return noNumbers(event)" />
-
function noNumbers(e){
-
var keycode = window.event ? e.keyCode : e.which;
-
//Internet Explorer/Chrome 浏览器使用 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 。
-
var keychar = String.fromCharCode(keycode);//fromCharCode:将 Unicode 编码转为一个字符
-
-
if(keycode >= 48 && keycode <= 57){ //数字键盘代码:0-9
-
e.returnValue = true
-
}else if(keycode >=96 && keycode <= 105){ //onkeydown事件:小键盘数字代码:0-9
-
e.returnValue = true;
-
}else if(keycode == 8 || keycode == 46){ //删除键和delete
-
e.returnValue = true;
-
}else if(keycode == 45){ //负号不允许输入。onkeydown事件:keycode == 109 || keycode == 189
-
e.returnValue = false;
-
}else{ //其他字符不允许输入
-
e.returnValue = false;
-
}
-
}
'
运行
相关知识:
网上的效果:输入负号,会把所有内容置空。
-
<input type="number" onkeyup="checkNum(this)" >
-
function checkNum(obj){
-
obj.value=obj.value.replace(/[^\-\d]/g,'');
-
if(obj.value.indexOf('-')>=0){
-
obj.value='-'+obj.value.replace(/-/g,'');
-
}
-
}
注意:没有特殊需求,不要使用onkeydown事件,onkeydown触发后的状态码不一致,英文上面的数字和小键盘的数字代表的编码不一致。onkeypress获取的是ASCII值,onkeydown的编码是虚拟码!平常操作的也就是ASCII。