Vue中输入框只能输入整数和小数

最新推荐文章于 2024-07-31 09:38:11 发布

lxy123456780

最新推荐文章于 2024-07-31 09:38:11 发布

阅读量3.9k

点赞数 3

分类专栏： js vue 文章标签： vue 输入框数字

本文链接：https://blog.csdn.net/lxy123456780/article/details/89176441

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

11 篇文章 1 订阅

订阅专栏

在main.js中写一个指令

 //限制只能输入正整数,不包含小数
 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;
           }                            
       }
     });
   }
 });
 
 //只能输入正整数及小数 包含小数点
 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;
         }
       }
     });
   }
 });
 //有小可爱提出了是否能输入小数，我想了想，大概可以实现输入负数，但是并不是限制只能是负整数。有空我再思考下

// 只能输入正负整数及小数 包含小数点
Vue.directive('enterNumber3', {
  inserted: function (el) {
    el.addEventListener('keypress', function(e) {
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d/
      if (el.value === '' && charcode === 45) {
        return true;
      } else if (el.value !== '' && charcode === 45) {
        e.preventDefault();
        return false
      }
      if (charcode === 46) {
        if (el.value.includes('.')) {
          e.preventDefault()
        }
        return true
      } else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
            e.returnValue = false
        }
      }
    })
  }
})

2.使用方法

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