ウェブアプリの時代が始まりつつあります。
ブラウザ上でユーザーエクスペリエンス関連のほとんどのことは実現可能になっていて、サービス提供の際の有力候補となりつつありますが、スマートフォンやタブレットをターゲットにした場合、キーボードの問題が大きく立ちはだかります。
現在、HTML5で規定されているinput要素のテキストフィールドのタイプは、text, search, tel, url, email, password, numberの7種類です。
text, search, tel, url, emailでそれぞれ異なるソフトウエアキーボードが提供されます。
また、input要素にはpattern属性があり入力値を正規表現でチェックすることができますが、iPhone/iPadはこれに応じて上記キーボードから選択を行うようです。
通常のウェブサイトの場合には上記キーボードで十分かもしれませんが、ウェブアプリの場合、その対象は様々で、色々不満が残ります。そのため、ソフトウエアキーボードで足らないキーは、他のHTML要素で補うことになります。
テキストフィールドにフォーカスした状態で、ボタンなどタップ可能な他のHTML要素をタップすると、一瞬フォーカスが外れるため、ソフトウエアキーボードがスライドダウンして消えようとします。通常テキストフィールドの変更を伴うのですぐにぴくっと動いてすぐ元に戻るですが。
この動作、些細なことですが気になって非常に残念でしたが、避ける方法がわかりました。
タップ可能なHTML要素のonmousedownを以下のように指定してください。
onmousedown="event.preventDefault()"
onmousedownのデフォルト動作として、フォーカスの変更が行われていたようです。こう指定することで、ソフトウエアキーボードがぴくっと動く動作を良くすることができます。
