input type='tel' VS type='number'


有個小需求 驗證手機號(移動h5)

手機上點輸入框調起數字鍵盤,並且只能輸入11位純數字

一開始用的<input type='number' v-model="phone" maxlengt="11">

但是有兩個問題:

一是maxlength不起作用 無法限制長度

另一個是 由於數字鍵盤可以輸入'-+.'這兩個字符 一旦輸入這兩個字符 this.phone 的值就變成空

比如輸入021 繼續輸入- e.target.value就會變為空,因為021-不是數字,不合法。不過 -4是合法的

 

解決辦法:

type的屬性值 有一個tel 定義用於電話號碼的文本字段

於是改為<input type='tel' v-model="phone" @input="input" maxlengt="11">

這樣寫maxlength會生效 由於是電話鍵盤 除了'-+.' 還允許輸入‘#*’時  此時 this.phone 就是 輸入框中的值 

因此還需要通過js代碼 處理這兩個符號 添加一個input方法:

input() {  

  this.phone = this.phone.replace(/[^0-9]/g, '');

}

這樣就實現了我們想要的功能。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM