スマートフォン上での inputタグとキーボードの関係

よくある疑問

スマホで入力フォームタップしたときに立ち上がるキーボードって制御できないの？

結論としては制御はできません。但し、type属性に対応した初期キーボードの設定はOS側？でされているので、そちらでひっかけることはできるっぽい。

スマートフォン上での inputタグとキーボードの関係

正確には文字列を打ち込むタイプのinput

具体的には

input type="text"

input type="search"

input type="number"

input type="tel"

input type="email"

input type="password"

input type="url"

だいたいこんな感じ。他にもdatetimeなどもあるけど、端末やOSによってはテキストでない入力方法もあったりするので却下。

さてこの状態で、実際にスマートフォンからタップしてもらえるとわかるが、
各inputタップ後最初に起動するのは、

text        → デフォルト
search     → デフォルト
number    → 数字入力
tel          → 電話番号入力
email       → 英字
password → 英字
url          → デフォルト

となるかと。 要するに、だいたいデフォルトなわけで。(「デフォルト」 はデフォルトに設定されているキーボードタイプ)
きちんと入力させたいものに合わせてtypeを設定してやると、ユーザー的にはキーボード切り替えの手間は省ける。

ただし落とし穴があり、上記で 「デフォルト」 としたものは、タップしたとき必ずデフォルト設定キーボードが登場するわけではない。
たとえば上記であれば、

① type="text" のinputをタップし、数字キーボードに切り替えた後、
② type="search"をタップしてみる。

するとデフォルトが数字キーボードでもない限りデフォルトキーボードが出てくるはずなのだが…

答えは 「数字キーボードが居座り続ける」

そもそもキーボードの入れ替え自体が発生しない。

ただし、今度は
① type="text" のinputをタップし、数字キーボードに切り替えた後、
② type="email"をタップ、さらに数字キーボードに切り替えておく
③ またtype="text" のinputのうち、どれかをタップすると…

答えは 「デフォルトキーボードが立ち上がる」

自由すぎる…orz

また、 「数字だけを入力させたいんだ！」 ってところには type="tel"をわざと仕込んでやる、なんて手法もあるが、そのあたりでバグが一つ。

iOS5において、type="number"の 仕様 として、

① 「0930」など、"0"から始まる数字は、 valueにおいても0をないものと扱い、 例ならば「930」と認識する
② 3ケタごとに、「123,456,789」のように、","を入れて表示する。但しこちらは表示だけで、valueに影響は与えない。

という仕様がある。そのため、「電話番号入力」や「パスコード入力」のように、先頭の0を認めるものに対して type="number"を使うと正しく値が取れなくなる。




なお、iOS6からは治っている模様。 不評だったんだね…(・ω・`)