毎日更新

79日目 続・憎きSafari

こんにちは。

今日は、「憎きsafari(続編)」です。
昨日に続き、このあとQiitaに書く前に頭の中を整理するつもりで書いてます。

昨日の記事で、「iOS Safariのフォーカス周りで苦しめられた」という話をしました。主に「オートフォーカス」について焦点を当てて、「ユーザーの明確なアクションを伴わないとオートフォーカスできないよ」というのが結論でした。

今日は、オートフォーカス周りの挙動を調べてる過程で得た「キーボード周り」の知見について軽くまとめます(Androidは確認していないので、iOSの話になります)。

タグやタグで生成された入力欄にフォーカスすると、キーボードが出てきます。「基本的には、『フォーカスしている』=『キーボードが出ている』」ということになります。

今回仕事で実装しようとしたのが、「キーボードが出てるときは〇〇する」という要件でした。実は「キーボードが出ているか」を判定するメソッドはjsにおいて存在しなくて、「フォーカスしているか」で間接的に判定するような形になります。

「基本的には、『フォーカスしている』=『キーボードが出ている』」と言いましたが、そうならないときがあるんです。

それは、画像のような「日本語入力時、かな変換の『確定』前に完了を押した」ときだけ、「キーボードは非表示だけどフォーカスされている」という状況が起こってしまいます。

「かな入力→確定→完了」と、「確定」を押してから「完了」を押すと、最後に「blur」や「focusout」のイベントが走って終了します。

ただ、『確定』せずに『完了』を押すと、「blur」や「focusout」のイベントが走った後に最後に「focus」や「focusin」イベントが走って終了します(ほんと謎。超暇な人は試してみてください。)。キーボードは出ていないので一見フォーカスしているようには見えないのですが、実はフォーカスしているという状況が生まれてしまいます。

だから、「キーボードが表示されているか」を「フォーカスされているか」で判定する場合は、注意が必要だよってことですね。

超絶マニアックな話になってしまったので、今日はこの辺で。

今は電車で渋谷に向かっております。超久々のオフラインイベントで知らない人に会うので若干緊張しておりますが、それより何よりハロウィンの渋谷から無事に帰ってこれるのかの方が100倍心配です。

生きて帰ってきます。また明日。

おわり。

  • この記事を書いた人

きわっち

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

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