input框只容许输入正整数、正数(包含小数)的解决方法 vue.js实现

我来打本身脸了!!!!...刚刚发如今中文输入法下是无效的,有人能解决这个问题么

若是要求input只能输入数字怎么作？
设置type="number" ? 那我若是想限制长度，此时maxLength=“6” 会失效，js限制长度？ 太麻烦了

而且type="number" 还存在的一个问题是，当输入的是小数时，鼠标悬停在input上会提示“请输入有效值，两个最接近的值为0和1”，这对于用户体验来讲很是差，很是容易误导用户，

那就只能设置type="text"了，可是设置type="text"又会致使input能够输入非数字了，因而网上百度google找的一大堆各类经过js去控制的，好比onkeyup事件等，检测到输入的是非数字就截取掉，替换掉，这可以实现只能输入数字，可是正如标题所说，只容许正整数和正小数，并且还存在字母e 和 输入1.1.111.....1 这种状况,依然经过这些方法去实现未免太麻烦了

今天，分享一下本身实现只能输入正整数和正小数,一个vue指令就能够解决！

只能输入正整数
根据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 >

//在只容许输入正整数的状况下，type="number" 能够防止输入中文，step="0.0000000001" 能够处理输入小数时的“请输入有效值，两个.....” 
<input type="number" step="0.0000000001" v-enter-number >

不知道这段代码有没有可优化的地方，或者存在什么问题，若有其余更好的建议，欢迎留言