30天挑戰:「信用卡資料的inputmode設定」 相關筆記
總結
- 透過
input
的inputmode
設定來控制呼叫出來的鍵盤樣式 - 如果是為了接受信用卡資料的話,設定為
type="tel"
搭配inputmode="numeric"
可以在 iPhone Chrome 叫出僅有數字鍵的鍵盤 - CodePen 實驗頁:https://codepen.io/Charlie7779/pen/OJgPWJa
環境
Google Chrome (iOS/WebKit): 92.0.4515.90
實測結果
none
:不會呼叫任何鍵盤tel
:點選左下角+*#
鍵可切換為符號鍵盤decimal
:點選左下角.
鍵可直接輸入.
號,不會切換為符號鍵盤numeric
:僅提供數字鍵盤text
:呼叫一般鍵盤search
:右下角的「換行」鍵改為「前往」(英文鍵盤為「go」)email
:空白鍵右側追加@
與.
鍵url
:空白鍵右側追加/
與.
鍵