[mobile]在手機預設顯示純數字或英文鍵盤

[mobile]在手機預設顯示純數字或英文鍵盤

有時在寫手機專用的網頁時,會需要讓使用者focus到text input時,跳出適合的鍵盤。

例如在輸入卡號時,跳出只有數字的鍵盤,可以用HTML5新增的type:

<input type="number" />
<input type="tel" />

當使用者focus到input時,以andriod為例,就會顯示如下圖的鍵盤

注意:當type設定為number時,如果輸入0開頭的數字,在傳到後端時會把開頭的0去掉,像是0099就會變成99而已,如果需要接收到0開頭的字串則用type="tel"

如希望跳出英文的鍵盤,可用一樣是HTML5新增的type:

<input type="email" />
<input type="url" />

當使用者focus到input時,以andriod為例,就會顯示如下圖的鍵盤,兩者差別只在右下角的/.com及@.com

使用以上input type時,當按下submit按鈕時,會自動檢查是否符合該type的格式,像是email就會要求輸入值要包含@等等。

參考資料

https://www.w3schools.com/tags/att_input_type.asp