読者です 読者をやめる 読者になる 読者になる

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

ウェブでのiPadのソフトウエアキーボードの拡張方法

Tips


ウェブアプリの時代が始まりつつあります。
ブラウザ上でユーザーエクスペリエンス関連のほとんどのことは実現可能になっていて、サービス提供の際の有力候補となりつつありますが、スマートフォンタブレットをターゲットにした場合、キーボードの問題が大きく立ちはだかります。


現在、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のデフォルト動作として、フォーカスの変更が行われていたようです。こう指定することで、ソフトウエアキーボードがぴくっと動く動作を良くすることができます。