<el-input>標簽限制輸入

方案一:
因為方案二會有一個問題,就是不能保留兩位小數(shù)點,也就是金額的角和分,而且如果輸入法是中文輸入,然后按下切換中英文鍵shift,會發(fā)現(xiàn)可以輸入英文字母,顯然是有問題的,以下方案可以解決這兩個問題。

   <el-input size="medium"
                      class="el-input-style"
                      v-model.trim="inputMony"
                      placeholder="請輸入充值金額"
                      :maxlength="inputMaxL"
                      @input="inputMaxL = /^\d+\.?\d{0,1}$/.test(inputMony)? null: inputMony.length - 1"
                      :onkeyup="(inputMony = inputMony.replace(/[^0-9.]/gi, ''))">

方案二:
當實現(xiàn)充值功能時,使用<el-input>進行金額輸入,所以需要將type設(shè)置為number類型,但是會發(fā)現(xiàn),字母e和小數(shù)點.還是可以輸入,為了達到限制輸入,需要做以下處理。

 <el-input size="medium"  type="number" placeholder="其他充值金額" v-model="inputMony" @focus="inputFocus" @keydown.native="channelInputLimit">
    // bug fix:指定輸入類型為number時仍然可以輸入字母'e'和小數(shù)點'.'(因為也屬于數(shù)字類型的范圍),這里做一下輸入限制
    channelInputLimit (e) {
      let key = e.key
      // 不允許輸入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容