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

輸入姓名

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

轉載于:https://www.cnblogs.com/hege/p/4991022.html

總結

以上是生活随笔為你收集整理的移动端输入框弹出键盘控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。