在移動端，我們公司通過輸入框主要收集用戶的姓名和電話，以下是對輸入框獲取焦點時，控制彈出鍵盤的樣式來增強用戶體驗。
輸入姓名
我們的用戶都是中國人，輸入用戶名為中文，所以彈出鍵盤是輸入中文狀態即可，這個時候type = 'text'即可，默認狀態下一般都是彈出中文輸入鍵盤，所以可滿足
有圖有真相
輸入電話/手機
這個需要輸入數字，所以我們希望它獲取焦點時可以彈出數字鍵盤，第一想到的是把type設置為number，但是在type=number時輸入框的右側會出現兩個小按鈕，丑丑的，而且點擊還可輸入負數，用戶體驗不好。 所以我們嘗試用樣式來去掉這兩個小按鈕，我們設置webkit的-webkit-inner-spin-button屬性以及-webkit-outer-spin-button屬性，都設置為-webkit-appearance: none即可。大概樣式是這樣的
類名::-webkit-inner-spin-button { -webkit-appearance: none; } 類名::-webkit-outer-spin-button { -webkit-appearance: none; }
這樣可以去掉兩個小按鈕，但這樣一個一個設置太麻煩，所以第二種修改方案是：
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; }
這樣是不是就ok了呢？應該是ok的，但是當我們需要type=number的兩個小按鈕時（還沒遇到過），還必須還原回來！所以感覺這種全局重置樣式不怎么好。
在網上看到一個方法 這個方法可以很好的替換type="number"的方法，而且手機端兼容性很好。
總結
在用input來收集用戶信息時：
姓名輸入用text即
<input type="text">電話/手機輸入用tel即
<input type="tel">
查看demo可掃下面二維碼
