H5 中數字 input 的處理

對於數字相關的輸入，咱們會使用 HTML5 提供的 type="number" 來處理。number 類型的 input 只容許咱們輸入與數字有關的內容（0-9，小數點、正負號以及表示科學計數法的 e）

能夠在下面的輸入框中嘗試一下 type="number" 的 input :

然而在實際的業務場景中，type="number" 並不能知足咱們，好比禁止輸入小數點和正負號的需求。由於在輸入 . + - e 的時，input 的 onChange 事件時不會有響應的，除非當輸入是一個合法的數字。例如咱們輸入 ----1 或者 ....3 時，onChange 並不會有任何反應。也即咱們失去了對 input value 的判斷機會。

固然，利用 onKeyUp 或者 onKeyDown 來監聽按鍵來進行控制也是能夠的。不過我更喜歡換回 type="text" 配合正則進行處理。這招在 PC 端上問題不大，可是在移動端上卻會產生另外一個問題——喚起鍵盤的樣式。

---

在移動端中，input 的 type="number" 喚起的是數字鍵盤；type="text" 時喚起的是英文鍵盤。所以當遇到禁止輸入小數點、正負號的需求時，要麼說服產品，要麼就只能本身想辦法。不過現實中咱們每每會（無奈地）選擇後者。

一個虛擬鍵盤應該能夠知足各類需求。不過，本身實現虛擬鍵盤不只費時費力，極可能還要根據不一樣的系統進行樣式的修改，若是沒有現成的庫顯然是不太實際的方案。

那又可否利用 onKeyUp 和 onKeyDown 事件呢？然而手機（個人是小米）上 . + - 的按鍵都是 229，很顯然這是沒有辦法作判斷的。若是第一個就輸入 . + -，那麼 e.target.value 是空。即使是合法的數字如 -1、+1 也不知足禁止輸入 + - 的需求。

那麼是否是就沒有辦法了呢？再次梳理一下需求，在移動端咱們須要點擊 input 時喚起數字鍵盤，而且不容許輸入非數字外的值（包括小數點、正負號）。

查看 MDN 以後發現 HTML5 中 input 有個 tel 的 type。<input type="tel" /> 正好能夠知足咱們的需求。顧名思義 type="tel" 是用來輸入電話號碼的，喚起的是號碼鍵盤（與數字鍵盤很類似）。儘管不是真正的數字鍵盤(iOS 上能夠看到二者的區別)，但也基本知足了咱們的需求了。而另外一個最重要的特色就是，type="tel" 與 type="text" 相似，能夠利用 onChange 對全部輸入進行監聽，這也就意味着咱們能夠對輸入的值進行控制了。

儘管這是一個投機取巧的辦法，不過用在移動端上確實很是有用。下次若是遇到移動端的數字輸入的狀況，不妨能夠考慮一下 type="tel" 這個屬性。