[转载]vue指令的一些常规操作，比如只能输入正整数

我们做项目经常会遇到，只能输入正整数，看到一篇挺不错的自定义指令，转载下来

首先想到的是设置type="number" ? 但是如果想限制长度，设置maxLength就会失效，如果vue项目上通过js去校验长度又太麻烦

并且type="number" 还存在的一个问题是，当输入的是小数时，鼠标悬停在input上会提示“请输入有效值，两个最接近的值为0和1”，还有有些input框回车导致光标偏上等等

那我们现在来设置type="text"，通过指令控制文本框只能输入正整数

根据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;
        }
      }
    });
  }
});

　

使用方法

将上诉代码放在main.js中，然后在input框上添加自定义指令，注意自定义指令要以v-开头，并且驼峰命名要写在小写的形式
注:这时候的input框type只需要使用text类型就可以了，不要使用number类型，不然会出现“请输入有效值，两个最接近的值为0和1”

<input type="text" v-enter-number2 >

转载链接：https://www.jianshu.com/p/ce451ef75fa0