スマホのinput要素にページ起動時に自動focusはできない件

インターネットブラウザは万能ツールであると考えている、ユゲタです。 でも、スマートフォンのインターネットブラウザには、制約がいっぱいあって、非常にもどかしい思いをしている開発者もたくさんいるでしょう。 もちろん、間違いなくボクもその一人なんですが、 先日、とあるホームページを作っている時に、お問い合わせフォームだったんですが、そのページを表示したら、最初に入力する名前欄にフォーカスするという仕様が決まっており PCブラウザでは、問題なく実装できたんですが、スマートフォンでここに制限があることをすっかり忘れていました。 この入力フォームのオートフォーカス制限について、何故こんな制約があるのか、不思議に思っている人もいると思うので、ボクなりにその件についてブログに書いておきます。

スマートフォンの制約について

スマートフォンは、パソコンの機能を手軽に携帯電話に搭載されたという高品位PDAという位置づけで作られました。 が、実際はあまりにも便利すぎるため、リテラシの低い人などが、いろいろなネット被害に合うことが多かったり、 マウス操作から独特のタッチ操作になったことで、起き始めたトラブルなどを回避するために、いろいろな制約が設けられてきた歴史があるようです。 便利なHTML5も、スマートフォンでは、制約受けまくりなんですね。 そんな制約の中に、inputタグなどの項目にオートフォーカスができないというのもあるんですが、これはどんなトラブルに繋がるのだろう？？？ と不思議に思っていたんですが、 おそらくボクが考えるに、これは、スマートフォンでは、セレクトフォームが、パソコンの表示と大きく異なったり、 キーボード表示がされるようなインターフェイスが、独特なため、OS側でのトラブルにつながるからと考えたからではないだろうか？ 入力要素にフォーカスしていると、画面スクロールもできないですからね。 確かにソフトウェアキーボード事態はHTML側でコントロールすることはできませんからね。

本当にオートフォーカスできないのか？？？

結論から書いておきますが、「できませんでした」 javascriptでvalue値の書き換えも、submit操作も、自動で行えるのに、focusだけは、どうしてもできません。 fucus()が何かのタッチ操作が無いと発動しないという仕様にされているので、どうしようも無いようです。 さらに、javascriptでclick()操作をしても、このタッチ操作フラグはONにならないし、 setTimeoutなどで、時間差で行っても無駄です。 ではどうしたらいいのでしょうか？

苦肉の策の対応方法

それは、タッチイベントがそのページで最初に発生したタイミングで、初回タッチ時は強制的に任意フォームにオートフォーカスさせるという風にするしかありません。 制約がタッチイベントである以上、ここからは逃げられないからですね。 ページを読み込んで、スクロールさせようとスワイプしたタイミングでキーボードが起動するような使い心地になります。 少し気持ち悪いですが、オートフォーカスという機能ではないので、ユーザービリティ的にいけているかどうかは実際に作って試してみるしかないんですが、 正直あまりこういう事はやらないほうがいいんでしょうね。 でも、そういうITリテラシの低いクライアントからの強い要望があったら、そうした実装をしてもあげますが、 「その後のことは正直しらんで！」と心のなかで叫んでいますね。きっと・・・