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

輸入姓名

我們的用戶都是中國人，輸入用戶名為中文，所以彈出鍵盤是輸入中文狀態(tài)即可，這個時候type = 'text'即可，默認狀態(tài)下一般都是彈出中文輸入鍵盤，所以可滿足

有圖有真相

輸入電話/手機

這個需要輸入數(shù)字，所以我們希望它獲取焦點時可以彈出數(shù)字鍵盤，第一想到的是把type設(shè)置為number，但是在type=number時輸入框的右側(cè)會出現(xiàn)兩個小按鈕，丑丑的，而且點擊還可輸入負數(shù)，用戶體驗不好。 所以我們嘗試用樣式來去掉這兩個小按鈕，我們設(shè)置webkit的-webkit-inner-spin-button屬性以及-webkit-outer-spin-button屬性，都設(shè)置為-webkit-appearance: none即可。大概樣式是這樣的

類名::-webkit-inner-spin-button {-webkit-appearance: none; } 類名::-webkit-outer-spin-button {-webkit-appearance: none; }

這樣可以去掉兩個小按鈕，但這樣一個一個設(shè)置太麻煩，所以第二種修改方案是：

input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button {-webkit-appearance: none; }

這樣是不是就ok了呢？應(yīng)該是ok的，但是當我們需要type=number的兩個小按鈕時（還沒遇到過），還必須還原回來！所以感覺這種全局重置樣式不怎么好。

在網(wǎng)上看到一個方法 這個方法可以很好的替換type="number"的方法，而且手機端兼容性很好。

?

總結(jié)

在用input來收集用戶信息時：
姓名輸入用text即

<input type="text">

電話/手機輸入用tel即

<input type="tel">

查看demo可掃下面二維碼

轉(zhuǎn)載于:https://www.cnblogs.com/hege/p/4991022.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。