我來打自己臉了!!!!...剛剛發(fā)現(xiàn)在中文輸入法下是無效的,有人能解決這個問題么

如果要求input只能輸入數(shù)字怎么做？
設(shè)置type="number" ? 那我如果想限制長度，此時(shí)maxLength=“6” 會失效，js限制長度？ 太麻煩了

并且type="number" 還存在的一個問題是，當(dāng)輸入的是小數(shù)時(shí)，鼠標(biāo)懸停在input上會提示“請輸入有效值，兩個最接近的值為0和1”，這對于用戶體驗(yàn)來說非常差，非常容易誤導(dǎo)用戶，

那就只能設(shè)置type="text"了，但是設(shè)置type="text"又會導(dǎo)致input可以輸入非數(shù)字了，于是網(wǎng)上百度google找的一大堆各種通過js去控制的，比如onkeyup事件等，檢測到輸入的是非數(shù)字就截取掉，替換掉，這能夠?qū)崿F(xiàn)只能輸入數(shù)字，但是正如標(biāo)題所說，只允許正整數(shù)和正小數(shù)，而且還存在字母e 和 輸入1.1.111.....1 這種情況,依然通過這些方法去實(shí)現(xiàn)未免太麻煩了

今天，分享一下自己實(shí)現(xiàn)只能輸入正整數(shù)和正小數(shù),一個vue指令就可以解決！

只能輸入正整數(shù)

根據(jù)keypress事件，監(jiān)視鍵盤keyCode碼，結(jié)合數(shù)字正則表達(dá)式 判斷鍵入的keyCode是否是數(shù)字，如果非數(shù)字則調(diào)用preventDefault事件阻止默認(rèn)行為
代碼中的正則使得只能輸入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;
          }                            
      }
    });
  }
});

只能輸入正數(shù)(包含小數(shù))

這個指令是在上面指令上做的修改，即允許輸入小數(shù)點(diǎn)，但是如果單純的允許輸入小數(shù)點(diǎn)，那就會造成輸入1.1....1....1...1這種無數(shù)小數(shù)點(diǎn)的情況，所有這里的處理方式是如果小數(shù)點(diǎn)是第一次輸入則放行，但是在下次按下鍵盤上的小數(shù)點(diǎn)keyCode 時(shí)會對輸入的value值進(jìn)行判斷，如果value值存在小數(shù)點(diǎn)，則調(diào)用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-開頭，并且駝峰命名要寫在小寫的形式
注:這時(shí)候的input框type只需要使用text類型就可以了，不要使用number類型，不然會出現(xiàn)“請輸入有效值，兩個最接近的值為0和1”

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

<input type="number" step="0.0000000001" v-enter-number > 
//在只允許輸入正整數(shù)的情況下，type="number" 可以防止輸入中文，step="0.0000000001" 可以處理輸入小數(shù)時(shí)的“請輸入有效值，兩個.....”