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:空白鍵右側追加/與.鍵