<input type="number">

1.問題

在開發(fā)微信公眾號(hào)是，需要實(shí)現(xiàn)一個(gè)提現(xiàn)的功能。只能輸入數(shù)字，并且獲取焦點(diǎn)的時(shí)候彈出數(shù)字鍵盤，并且在輸入的過程中驗(yàn)證輸入是否合法。選擇使用<input type="number">實(shí)現(xiàn)。并且在輸入時(shí)監(jiān)聽，使用正則檢驗(yàn)是否合法。發(fā)現(xiàn)無法檢測到輸入了小數(shù)點(diǎn)，從而無法檢測是否合法（例如輸入3.的時(shí)候應(yīng)該是不合法輸入）。通過調(diào)試發(fā)現(xiàn)在chrom瀏覽器上，type=number是非法

image

2.關(guān)于type=number

2.1 允許小數(shù)值

設(shè)置step=0.01 例如4.11是合法 但是4.111位不合法輸入 當(dāng)有不合法輸入時(shí)，chrome會(huì)將不合法部分替換為"" 故程序無法監(jiān)測數(shù)據(jù)發(fā)生了改變。
在iphone上輸入小數(shù)點(diǎn)是合法，所以在android和iphone上表現(xiàn)不一樣

<input type="number" placeholder="1.0" step="0.01">

3.統(tǒng)一兩種瀏覽器表現(xiàn)

使用keyup事件監(jiān)測是否輸入了小數(shù)點(diǎn)，在輸入小數(shù)點(diǎn)的時(shí)候，將數(shù)據(jù)賦值給另一個(gè)變量，
并將這個(gè)變量轉(zhuǎn)化成字符串，然后對(duì)這個(gè)字符串使用正則檢測是否合法。

<!-- 監(jiān)聽鍵盤上的小數(shù)點(diǎn) -->
<input type="number" class='ipt-num' 
       v-model="amount" step="0.01" @keyup.190.110="handleKeyUp($event)">
       
       
handleKeyUp(e) {
    <!-- 轉(zhuǎn)化成字符串  并加上小數(shù)點(diǎn) -->
    let temp = this.amount + '.'
    <!-- 使用函數(shù)檢測數(shù)值是否合法 -->
    checkAmount(temp)
}