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 >

不知道這段代碼有沒有可優化的地方，或者存在什麼問題，若有其餘更好的建議，歡迎留言