在前端開發中，我們經常會遇到使用者輸入手機號的情況，比如手機號註冊、登入，收集使用者的手機號資訊等。如果我們要想把使用者體驗做到極致，至少要包含以下兩條需求：
1. 輸入框只能輸入數字
2. 輸入框最多只能輸入11個字元
通常情況下，開發人員的解決方法就是把input標籤的type屬性設定為number，這樣就限制了輸入框只能輸入數字型別的字元了，然後新增maxlength="11"，限制輸入框最多只能輸入11個字元。可惜的是，number型別的輸入框，不支援maxlength屬性。所以兩者我們只能取乙個，另乙個，要用其它的方式來實現。兩者，我們選擇保留maxlength屬性，而第乙個需求，我們用其它方式來實現。理由：number型別只能輸入數字型別的字串，但數字型別可不僅僅包括0-9這10個字元，還包括正號、負號、小數點，及字母e（科學計數），所以用number型別並沒有完全實現第一條需求。那接下來要做的就是如何自己實現輸入框只能輸入數字了。
插一點題外話，在測試的過程中，當我們提出一些問題，或是建議的時候，經常會遇到這樣的回答：這個東西就是這樣的，這個框架就是這樣的，言外之意就是：這個需求沒法實現，或是沒有必要實現。就比如上面的這個問題，使用number型別的輸入框，還是可以輸入一些非數字，問題反饋給開發，基本上都會說，number型別就是這樣的，然後他們就可以心安理得的忽略掉這個問題。而我想說的是，面對乙個問題，最起碼的態度，應該是先嘗試著去解決，而不是用自己現有的知識去判斷能不能做。當你拒絕乙個需求時，也是在拒絕一次學習的機會。一次拒絕，兩次拒絕，當拒絕成為一種習慣，那麼到最後，你就只能用自己掌握的知識去解決問題，無法創設性的去解決問題了。
言歸正傳。首先，我們能想到的就是給輸入框新增鍵盤抬起事件，在鍵盤抬起時，把非數字的字元去掉，完整**如下：
有問題，那就得解決啊，對於第一點，我原先考慮過，通過鍵值來判斷使用者按了什麼鍵，然後在顯示到輸入框之前，進行處理。也就是如果使用者按的鍵是0-9，那麼就讓輸入的內容，顯示到輸入框中，否則就丟棄掉。具體的實現，我沒有做筆記，因為這個方法達不到需求，所以沒有做筆記。這個方法的缺陷也很明顯，如果是組合按鈕，就會有問題，比如shift+1，那個嘆號還是會輸入到輸入框中，還有複製貼上的問題。一時之間，想不到解決的方法了，我就先考慮第二個問題。移動端沒有鍵盤抬起事件，於是就想到了change事件，change事件，是在輸入框的內容發生改變的時候觸發。但是，它的觸發還需要乙個條件，那就是在輸入框失去焦點時，也存在問題。
到這裡，似乎已經山窮水盡了，何處去找柳暗花明？難道要就這樣放棄？我可不是乙個輕易放棄的人，不然，別人也不會用固執來形容我了。於是，又是各種找啊，各種嘗試啊，當然，在這個過程中，讓我學習到了很多的知識，最後，終於讓我找到了解決方法。那就是在jquery裡面有個input propertychange方法，當然這個方法是做了相容的，ie有onpropertychange方法，其它瀏覽器有oninput方法。那麼實現的**如下
(function()).on('input propertychange', '.word', function());
})();
當我們解決乙個問題的時候，可能需要費盡心思，上下求索。但是在這個過程裡，我們會遇到很多之前沒有接觸過的知識，而這些知識，也許就是你以後遇到的某乙個問題的解決方案，這就是經驗的累積。
手機號，銀行卡號等自動分組顯示的輸入框
位址如下 前言 在android開發中，我們經常會遇到手機號，銀行卡號，稅號等長串數字或字母，為了視覺上的簡潔化，需要4個一組分組顯示，今天就講講這個功能的實現和使用。今天涉及的內容有 原理分析 小寫轉大寫的類uppercasetransform 封裝類credittext的介紹和使用 專案結構圖和...
多輸入框輸入（驗證手機號碼）
在日常工作中，很多時候需要表單驗證。在下面這個表單中，需求是 在輸入框失去焦點時驗證所填入的手機號碼。點選輸入框後面的 可以進行下乙個手機號碼的輸入並驗證。html 1 table id addcustomer 2 tr 3 td class w70 客戶姓名 td 4 td 5 input typ...
Mobile 手機瀏覽器輸入框 數字輸入框
手機瀏覽器的輸入框，一直都是以web的方式進行開發的，沒有關注到使用者體驗，領導提出了輸入框要彈出數字輸入框，想來應該有這種技術能實現。搜尋之後發現可以使用type number 實現，此方法在andriod和ios下均能實現效果，以下為使用之後遇到的問題 1.使用type number 的問題，使...