手機號輸入框的優化
在前端開發中，我們經常會遇到使用者輸入手機號的情況，比如手機號註冊、登入，收集使用者的手機號資訊等。如果我們要想把使用者體驗做到極致，至少要包含以下兩條需求：
1. 輸入框只能輸入數字
2. 輸入框最多隻能輸入11個字元
通常情況下，開發人員的解決方法就是把input標籤的type屬性設定為number，這樣就限制了輸入框只能輸入數字型別的字元了，然後新增maxlength="11"，限制輸入框最多隻能輸入11個字元。可惜的是，number型別的輸入框，不支援maxlength屬性。所以兩者我們只能取一個，另一個，要用其它的方式來實現。兩者，我們選擇保留maxlength屬性，而第一個需求，我們用其它方式來實現。理由：number型別只能輸入數字型別的字串，但數字型別可不僅僅包括0-9這10個字元，還包括正號、負號、小數點，及字母e（科學計數），所以用number型別並沒有完全實現第一條需求。那接下來要做的就是如何自己實現輸入框只能輸入數字了。
插一點題外話，在測試的過程中，當我們提出一些問題，或是建議的時候，經常會遇到這樣的回答：這個東西就是這樣的，這個框架就是這樣的，言外之意就是：這個需求沒法實現，或是沒有必要實現。就比如上面的這個問題，使用number型別的輸入框，還是可以輸入一些非數字，問題反饋給開發，基本上都會說，number型別就是這樣的，然後他們就可以心安理得的忽略掉這個問題。而我想說的是，面對一個問題，最起碼的態度，應該是先嚐試著去解決，而不是用自己現有的知識去判斷能不能做。當你拒絕一個需求時，也是在拒絕一次學習的機會。一次拒絕，兩次拒絕，當拒絕成為一種習慣，那麼到最後，你就只能用自己掌握的知識去解決問題，無法創設性的去解決問題了。
言歸正傳。首先，我們能想到的就是給輸入框新增鍵盤擡起事件，在鍵盤擡起時，把非數字的字元去掉，完整程式碼如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $('input').keyup(function(){ $(this).val($(this).val().replace(/\D/g, '')); }); }); </script> </head> <body> <input /> </body> </html>
這裡我是使用jquery寫的程式碼，這樣是可以實現需求，但也有一些問題。當我們在輸入框中輸入非數字的時候，會看到在輸入框中顯示我們輸入的內容，然後又刪掉了。更重要的是，在移動端，根本就沒有鍵盤擡起事件。
有問題，那就得解決啊，對於第一點，我原先考慮過，通過鍵值來判斷使用者按了什麼鍵，然後在顯示到輸入框之前，進行處理。也就是如果使用者按的鍵是0-9，那麼就讓輸入的內容，顯示到輸入框中，否則就丟棄掉。具體的實現，我沒有做筆記，因為這個方法達不到需求，所以沒有做筆記。這個方法的缺陷也很明顯，如果是組合按鈕，就會有問題，比如shift+1，那個歎號還是會輸入到輸入框中，還有複製貼上的問題。一時之間，想不到解決的方法了，我就先考慮第二個問題。移動端沒有鍵盤擡起事件，於是就想到了change事件，change事件，是在輸入框的內容發生改變的時候觸發。但是，它的觸發還需要一個條件，那就是在輸入框失去焦點時，也存在問題。
到這裡，似乎已經山窮水盡了，何處去找柳暗花明？難道要就這樣放棄？我可不是一個輕易放棄的人，不然，別人也不會用固執來形容我了。於是，又是各種找啊，各種嘗試啊，當然，在這個過程中，讓我學習到了很多的知識，最後，終於讓我找到了解決方法。那就是在jquery裡面有個input propertychange方法，當然這個方法是做了相容的，IE有onpropertychange方法，其它瀏覽器有oninput方法。那麼實現的程式碼如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('input').on('input propertychange', function(){
$(this).val($(this).val().replace(/\D/g, ''));
});
});
</script>
</head>
<body>
<input />
</body>
</html>這樣，就實現了用js控制輸入框只能輸入數字了。方法有了，那麼要讓別人用，就需要讓別人用起來簡單，越簡單越好了。於是，我們就新建一個js檔案，就叫util.js吧，然後在裡面寫入以下程式碼
(function(){
$(document).on('input propertychange', '.num', function(){
$(this).val($(this).val().replace(/\D/g, ''));
}).on('input propertychange', '.word', function(){
$(this).val($(this).val().replace(/[^0-9a-zA-Z]/g, ''))
});
})();儲存，然後我們在html檔案中引入，那麼給input新增num的class，那麼這個輸入框就只能輸入數字了，新增word的class，那麼輸入框就只能輸入數字和字母了，這樣是不是很方便呢
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="util.js"></script>
</head>
<body>
<input class="num" maxlength="11" />
<input class="word" />
</body>
</html>這樣的話，第一個輸入框，就只能輸入數字，並且最多隻能輸入11個字元。第二個輸入框只能輸入數字或字母了。
當我們解決一個問題的時候，可能需要費盡心思，上下求索。但是在這個過程裡，我們會遇到很多之前沒有接觸過的知識，而這些知識，也許就是你以後遇到的某一個問題的解決方案，這就是經驗的累積。
在後面的部落格裡，我會運用前端+java來簡單實現一個電子商城的後臺管理系統。前端和java我都是自學的，而且都沒有全學完，所以面向的還是初學者吧。歡迎大家關注哦！