移動web開發-input與手機軟鍵盤的關係

最近在作項目登陸註冊頁面的時候一直在思考一個問題，如何讓輸入表單的時候，手機軟鍵盤顯示「下一步」而非「前往」，隨着瞭解的深刻，就順便總結一下input各種型和手機軟鍵盤的關係。

1.type=text ，ios和安卓都會彈出全鍵盤，右下角都爲go按鈕或者是前往

2.type=url ， ios和安卓都會彈出帶有「/」、「.com」之類的能夠快速輸入網址的軟鍵盤

3.type=number，ios下會彈出包含數字和各類符號的軟鍵盤，安卓下則會彈出一個相似於撥號鍵盤的純數字加部分標點的鍵盤。

4.type=tel，這會使ios和安卓下都彈出相似於撥號時的數字鍵盤，因此在移動頁面開發中，通常都使用type=tel而非type=number。

5.type=date、datetime、time、mouth。這些只在ios下會彈出ios原生的日期選擇器。

6.type=email 這會使ios和安卓都彈出帶有「@」鍵的軟鍵盤。

7.type=search 這會使軟鍵盤右下角的前往鍵變爲一個搜索放大鏡按鈕，並且輸入時輸入框右邊會有清空按鈕。順便一提，經過css input[type=search]能夠修改這個按鈕的樣式哦！

最後關於「下一步」和「前往」按鈕的問題，最近看到了stackoverflow上的兩篇回答。

結論以下：

在ios上軟鍵盤右上角有自帶的上一步和下一步按鈕，在安卓下，鍵盤右下角老是「前往」按鈕，除了「type=number和tel」的情形下右下角總爲「下一步」按鈕。這個設計很怪異，按理說html5現有的東西徹底可讓手機知道當前正在輸入表單中的第幾個input，手機徹底能夠憑藉這一點去判斷調出「下一步」仍是「前往」，然而事實並非這樣。

網友們給出的辦法只能是一些hack技巧，好比讓用戶點擊「前往」時不提交表單，而是將焦點轉向下一個輸入框。但總歸，當前狀況下咱們沒法改變按鈕顯示的字。

只能期待隨着html5的發展，愈來愈多的瀏覽器和設備實現更多的細節上對h5的支持╮(╯▽╰)╭

 

ps：另外發現，這一點能夠用來鑑別一個app是原生app仍是hybirdapp，好比你若是在微信中輸入帳號密碼，會發現軟鍵盤會分別顯示「下一個」和「完成」。而若是你是用百度貼吧app，你會發現每次都是「前往」。