スマートフォンにおけるHTML5対応状況 (2) input typeについて
今回はマニアックにinputタグについて掘り下げようかと。
html5からinputタグのtype属性が大量に追加されています。
今までは
- type="checkbox"
- type="radio"
- type="image"
- type="text"
- type="password"
なんかを使っていたと思いますが、html5では
- type="tel"
- type="url"
- type="number"
など、内容に合わせた専用のtype属性が用意されています。
これで id="tel" とか id="url" なんて指定がいりません。
ただ、当然ブラウザごとに対応状況が違います。
せっかくのスマートフォンブログなので、iPhoneとXperiaでの対応状況を調べてみました。
| iPhone（iOS） | Android（Xperia） | |||
|---|---|---|---|---|
| 対応 可否 |
入力モード | 対応 可否 |
入力モード | |
| type="checkbox" | ◯ | ◯ | ||
| type="radio" | ◯ | ◯ | ||
| type="file" | × | × | ||
| type="submit" | ◯ | ◯ | ||
| type="image" | ◯ | ◯ | ||
| type="reset" | ◯ | ◯ | ||
| type="button" | ◯ | ◯ | ||
| type="text" | ◯ | 英字 | ◯ | 日本語 |
| type="password" | ◯ | 英字 （言語切替無し） |
◯ | 英字（テンキー） |
| type="tel" | ◯ | テンキー | ◯ | 日本語 |
| type="search" | ◯ | 英字 | ◯ | 日本語 |
| type="url" | ◯ | 英字（.comあり） | ◯ | 日本語 |
| type="number" | ◯ | 数字 | ◯ | 日本語 |
| type="email" | ◯ | 英字（@あり） | ◯ | 日本語 |
| type="datetime" | ？ | 英字 | ？ | 日本語 |
| type="date" | ？ | 英字 | ？ | 日本語 |
| type="week" | ？ | 英字 | ？ | 日本語 |
| type="month" | ？ | 英字 | ？ | 日本語 |
| type="time" | ？ | 英字 | ？ | 日本語 |
| type="datetime-local" | ？ | 英字 | ？ | 日本語 |
| type="range" | ？ | 英字 | ？ | 日本語 |
| type="color" | ？ | 英字 | ？ | 日本語 |
共通仕様
それにつられてautocomplete / datalist属性も無効
iPhone
- autocorrect：スペルチェック機能。英文入力のみをする箇所（どんな？？）以外はoffでいいかと。特にログインIDなどを入れる箇所ではoffにしとかないとウザイかも
- autocapitalize：先頭文字が大文字になる処理。これがonになっていると先頭文字入力時のみShiftキーが押されている。英文を書かない限りはこの処理は邪魔になるので、デフォルトoffを指定していいかも
ちなみに text / search / url / email あたりがこのモード。url / emailではかなり邪魔な処理なのでoffにするのを忘れずに設定しましょう。 - placeholderは積極的に利用
- autofocusは未対応なのでJSで対応が必要
$('#foo input:first-child').focus();みたいなね。
入力モードの切替
periaと一番の違いとして、入力モードがtypeによって切り替わります。
切り替わるモードについては表参照。
入力モードが切り替わるのは、type="password" / type="number" / type="tel" の3種類。
標準時は英字のQWERTYキーモードですが、一度日本語のテンキーモードに切り替えると、type="tel"などで一度数字入力モードに切り替わっても他のフォームにフォーカスすれば元のテンキーモードに切り替わります。
ただ、type="password" は強制的に英字モードに移行後、他のフォームに戻ってもQWERTYキーモードのまま。テンキーモード愛好者にはツライ仕様ですね。
type="password" の項目を最後に持ってきたりすると、ちょっと親切かも。
蛇足
左上の「次へ」ボタンを押すと、PCでのTabキーのように次のフォームへ自動で移動してくれます。そうするとモードによって微妙に「123」「言語切替」キーの場所が左にずれたり、「Shift」キーの矢印が小さくなったりするようです。これってバグ？もしくは内部的には入力モードが切り替わってる？
