毎日更新

78日目 憎きSafari

こんばんは。

金曜の夜にファミレスきて作業するとか意識高すぎて震えますね。
飲みいく相手がいないだけなんですけど。

今日は、「iOS Safariのフォーカス周りのお話」というテーマです。

ここ1,2週間、iOSの仕様に苦しめられていたおかげで、周辺知識が一気に深まった気がします。ただ、「iOS Safariのフォーカス周り」というかなりニッチな分野なのでなかなか欲しい情報は少なく、かなり苦労しましたね。これから時間がたってまた同じことを調べることになったときに大変な思いをするのが目に見えるので、自分への備忘録としてQiita記事に書き残すことにします。今日は、Qitiaに書く前の下書き的な記事。アウトプットの練習をアウトプットにしちゃう。

まず前提として、safariの仕様として「フォーカスは、ユーザーのアクションを伴わなければならない」というものがあるようです。

『safari版のGithub Issues』ともいえる『webkit Bugzilla』に投稿された報告に対する回答に、そのヒントがありそうです。

https://bugs.webkit.org/show_bug.cgi?id=195884#c4

この記事の内容をざっくり要約すると、

「タッチイベント以外をトリガーに.focus()を使ってフォーカスをあててもキーボードが表示されないのはバグじゃないっす!仕様っす!ユーザーが意図しないタイミングで入力欄にフォーカスがあたってキーボードが表示されて画面埋め尽くされたらジャマでしょ!?ユーザービリティ損ねちゃう!だから我々(Apple)はそういう仕様にしてるっす!」

ということみたいです。つまり、JavaSctiptを使ってフォームの入力欄にフォーカスできるのは、「ユーザーがそれを意図している」ときのみ。「ユーザーがボタンをタップした」とか、「文字の入力を完了した」とか、明らかにユーザーのアクションだと認識できるときにしか発動できないようです。

よくあるフォームの仕様で、「入力が完了したら次の項目に自動でフォーカスがあたる」てやつがあると思うんですけど、初期読み込み時の1つ目の項目へのオートフォーカスってのはできないようになっているんですね。

あとは、「タイムアウト処理が使えない」てのも今回大きく苦労したポイントでした。

たとえば、フォームの1項目目にフォートフォーカスできないのは前述した通りで、2項目目以降にオートフォーカスをさせる場合。このとき、1問目の入力が終わって2問目に切り替わるときにスライドのアニメーション処理を入れてたとします。アニメーションの完了を待ってからフォーカスさせないと意図しない挙動をするかもしれないからと、setTimeout等を使ってタイマー処理を行うと、なんとオートフォーカスしてくれません。どうやら、setTimeout()やanimate()のコールバックを使ったタイムアウト処理は、「ユーザーのアクション」とみなされないようです。なぜ。

エラーを吐くこともなく、静かに黙って処理が行われない。せめてエラーを吐いてくれ。

理由はわかりませんが、できないもんはできないんですね。受け入れるしかない。

あとはsafariのキーボード絡みの話もあるんですが、これは明日にとっておこう。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。

© 2021 きわっちのブログ Powered by AFFINGER5