鍍金池/ 問答/HTML/ 寫的限制input只能輸入正整數(shù)和小數(shù)的 vue自定義指令,存在一些問題,求指導(dǎo)

寫的限制input只能輸入正整數(shù)和小數(shù)的 vue自定義指令,存在一些問題,求指導(dǎo)解決

只能輸入正整數(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ù))
這個(gè)指令是在上面指令上做的修改,即允許輸入小數(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;
        }
      }
    });
  }
});

這兩個(gè)指令在 英文輸入法下 對input進(jìn)行鍵入是沒有任何問題的,但是在中文輸入法下卻沒有生效,求解決方法改進(jìn)

回答
編輯回答
維她命

如果只是為了約束成數(shù)字的話,type加pattern非常的好用,系統(tǒng)彈出的鍵盤都是數(shù)字類型的,即友好又方便

輸入數(shù)字:

<input type="number" pattern="[0-9]*"  placeholder="請輸入數(shù)字">

輸入整數(shù):

<input type="tel" pattern="[0-9]*" maxlength="11" placeholder="輸入整數(shù)">
2017年12月2日 17:35
編輯回答
練命

我想你還需要組合監(jiān)測這幾個(gè)事件才能解決這個(gè)問題。

2017年5月25日 01:21