はじめに
HTML5.2にて廃止予定なので、できることなら使いたくないことでおなじみのinputmode属性ですが、なんだかんだで便利なので使いたくなるケースもあったりします。
今回は、最新のmobile Safari（以下、Safari）でのキーボードの見た目を確認してまとめます。
iOS13.5.1のiPhone6sで確認しました。英語はQWERTY配列、日本語はフリック入力をつかっています。
見栄え一覧
none
キーボードは表示されませんでした。
inputmode属性が廃止された後は、この挙動をどうやって再現したら良いのかは謎です。
text
いわゆる普通のキーボードがこれなのでしょう。
最後に使ったキーボードが保持されているようです。
decimal
数字に特化したキーボードが表示されます。
最近時々「数字 + 記号」のテンキーみたいなやつが表示されて、連打すると記号になってしまってうわぁぁって思うキーボードと出会う時があるんですが、あれはなんなんでしょう。
今度出会ったらソースを確認しようと思います。
numeric
こちらも数字に特化したキーボードです。decimalとの違いは謎です。
tel
数字に特化しつつ、電話に必要な記号もついてくるお得な（？）キーボードです。
search
「決定キー」が「開く」とか「go」になります。
「@」が打ちやすい位置にでてきます。配慮が行き届いてますね。
url
「/」「.jp」が打ちやすい位置にでてきます。「.com」じゃなくて「.jp」なのは言語設定を見てるのかもしれません。
kana
kanaを指定すると日本語キーボードが出てくると最強なんですが、残念ながら出てくるのは最後に使ったキーボードです。
なのでtextと変わりません。
kana-name
こちらもtextと変わりません。
katakana
やはりtextと変わりません。
おわりに
本当はAndroidの見栄えも一緒にまとめようと思ったのですが、「Surface」とか「iPad」もあるなとか、考え始めたら面倒になったので一旦iPhoneの見栄えだけまとめました。
いろんな inputmodeを設定したページ を用意したので、AndroidやSurfaceの見栄えが気になる方はお試しください。
