移動端輸入框彈出鍵盤控制

在移動端，我們公司通過輸入框主要收集用戶的姓名和電話，以下是對輸入框獲取焦點時，控制彈出鍵盤的樣式來增強用戶體驗。

輸入姓名

我們的用戶都是中國人，輸入用戶名為中文，所以彈出鍵盤是輸入中文狀態即可，這個時候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可掃下面二維碼