Hail2u.net

検索フォームとそれへのページ内リンクによるフォーカス

検索フォームへは移動と同時にフォーカスもさせたい。そうしておかないと、入力可能にするにはもう一度クリックしなくてはならず、フラストレーションがたまるからだ。このウェブサイトではinput[type="search"]にIDを振ることで実現しておいた。HTMLコードだけで実装できる。しかし、Firefox 54やMobile Safari 10.2ではうまくフォーカスが当たってくれない。

See also: Fragment ID and Focus Management

Firefox 54ではフォーカス順の位置は入力ボックスの位置に移るが、入力可能な状態にはならない。Mobile Safari 10.2では入力ボックスがズームされ、キーボードが出てくるが、実際には入力することはできない。

フラグメントをたどる仕様によるとRun the focusing steps for targetというステップが存在する。それならばフォーカスが当たるのが正しいはずだ。Firefox 54やMobile Safari 10.2のバグと言えるだろう。とはいうものの、仕様の後出しのようなので、まだ反映されていないだけとも言える。

バグだ!と言っててもしょうがないので、JavaScriptでフォローした方が良いかもしれない。JavaScriptで制御する場合は、リンクをジャックするのではなく、hashchangeイベントを利用すると良さそうだ。DOM構築を待つ必要がないため、低コストで初期化できるはずだ。


今のところブラウザーのせいにして何もしていない。Firefoxはともかくとして、Mobile Safari 10.3で治っていなかったら直すつもりだ。

Firefoxには12年前からバグが立っていた。仕様の更新を受け、実装作業が進んでいるようだ。Safariにも同じようなバグがあり、パッチも登録されている。挙動が統一される可能性は高い。

追記

iOS 10.3に上げて確認したところうまくフォーカスが当たらないままだったので、とりあえずという形で当たるようにしておいた。Mobie Safariのclickイベントなどからしかフォーカスを制御できないという仕様のことをすっかり忘れていたので、なかなか面倒な感じになっている。それだけで済めばまだよかったのだが、Firefox 54ではclickイベントのコードを実行したあとにブラウザー側のフォーカス制御が行われるようで、こっちはこっちでhashchangeイベントを利用しなければならなかった。