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

不念不忘少年蓝@ 2022-02-14 14:17 661阅读 0赞

**我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么**

如果要求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”`

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

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

来源：[https://segmentfault.com/a/1190000016326913][https_segmentfault.com_a_1190000016326913]

[https_segmentfault.com_a_1190000016326913]: https://segmentfault.com/a/1190000016326913