为了账号安全,请及时绑定邮箱和手机立即绑定

写的限制input只能输入正整数和小数的 vue自定义指令,存在一些问题,求指导解决

写的限制input只能输入正整数和小数的 vue自定义指令,存在一些问题,求指导解决

慕娘9325324 2019-03-13 18:15:57
只能输入正整数根据keypress事件,监视键盘keyCode码,结合数字正则表达式 判断键入的keyCode是否是数字,如果非数字则调用preventDefault事件阻止默认行为代码中的正则使得只能输入0-9,其他所有的字符都无法输入,简单粗暴Vue.directive('enterNumber', {  inserted: function (el) {    el.addEventListener("keypress",function(e){      e = e || window.event;      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;      let re = /\d/;      if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){          if(e.preventDefault){              e.preventDefault();          }else{              e.returnValue = false;          }                                  }    });  }});只能输入正数(包含小数)这个指令是在上面指令上做的修改,即允许输入小数点,但是如果单纯的允许输入小数点,那就会造成输入1.1....1....1...1这种无数小数点的情况,所有这里的处理方式是如果小数点是第一次输入则放行,但是在下次按下键盘上的小数点keyCode 时会对输入的value值进行判断,如果value值存在小数点,则调用preventDefault() 阻止事件Vue.directive('enterNumber2', {  inserted: function (el) {    el.addEventListener("keypress",function(e){      e = e || window.event;      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;      let re = /\d/;      if(charcode == 46){        if(el.value.includes('.')){          e.preventDefault();        }        return;      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){        if(e.preventDefault){          e.preventDefault();        }else{            e.returnValue = false;        }      }    });  }});这两个指令在 英文输入法下 对input进行键入是没有任何问题的,但是在中文输入法下却没有生效,求解决方法改进
查看完整描述

2 回答

?
翻翻过去那场雪

TA贡献2065条经验 获得超14个赞

我想你还需要组合监测这几个事件才能解决这个问题。


查看完整回答
反对 回复 2019-04-14
  • 2 回答
  • 0 关注
  • 3225 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信