js 不允许输入框输入负数,负号都不能打出来的那种(最佳效果)

时间:2024-11-21 11:59:04

网上找了很多代码,基本上都是相同的效果,就是当输入负号的时候,会把所有的内容全部置空,这种效果对用户的体验是很不好的。万一,用户不小心输错了,然后又得全部重新输入一遍。

最后我去网上参考了很多关于输入框事件的知识,最后整理出来了一种最佳的方法,处理不允许输入负数,欢迎点赞评论。

代码:

<input type="number" onkeypress="return noNumbers(event)" />
  1. function noNumbers(e){
  2. var keycode = window.event ? e.keyCode : e.which;
  3. //Internet Explorer/Chrome 浏览器使用 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 。
  4. var keychar = String.fromCharCode(keycode);//fromCharCode:将 Unicode 编码转为一个字符
  5. if(keycode >= 48 && keycode <= 57){ //数字键盘代码:0-9
  6. e.returnValue = true
  7. }else if(keycode >=96 && keycode <= 105){ //onkeydown事件:小键盘数字代码:0-9
  8. e.returnValue = true;
  9. }else if(keycode == 8 || keycode == 46){ //删除键和delete
  10. e.returnValue = true;
  11. }else if(keycode == 45){ //负号不允许输入。onkeydown事件:keycode == 109 || keycode == 189
  12. e.returnValue = false;
  13. }else{ //其他字符不允许输入
  14. e.returnValue = false;
  15. }
  16. }
'
运行

相关知识:

网上的效果:输入负号,会把所有内容置空。

  1. <input type="number" onkeyup="checkNum(this)" >
  2. function checkNum(obj){
  3. obj.value=obj.value.replace(/[^\-\d]/g,'');
  4. if(obj.value.indexOf('-')>=0){
  5. obj.value='-'+obj.value.replace(/-/g,'');
  6. }
  7. }

注意:没有特殊需求,不要使用onkeydown事件,onkeydown触发后的状态码不一致,英文上面的数字和小键盘的数字代表的编码不一致。onkeypress获取的是ASCII值,onkeydown的编码是虚拟码!平常操作的也就是ASCII。