📖

iOSのMobile Safariではinputのautofocus属性が効かない

2021/11/12に公開

※本記事の内容は躓いた事象に対するメモに留まっており、問題解決の方法を提示しているものではありません。

動作確認用

https://codesandbox.io/s/ios-mobile-safari-does-not-work-autofocus-1kdr3

  • iOS Mobile Chromeでアクセスすると、autofucusされます。
  • iOS Mobile Safariでアクセスすると、autofocusされません。厳密には、inputにはフォーカスが当たっていますが(入力欄の枠が青くなっている)入力欄にはカーソルが当たっていない状態になります。

詳細

JedWatson/react-select: autoFocus does not work on Safari mobile
上記はreact-select内で立てられているissueですが、React以外でも再現します。

issue内コメントに記載されているリンク(Webkit Bugzilla: Bug 195884 - Autofocus on text input does not show keyboard)によると、

We (Apple) like the current behavior and do not want programmatic focus to bring up the keyboard when you do not have a hardware keyboard attached and the programmatic focus was not invoked in response to a user gesture. Why you may ask...because auto bringing up the software keyboard can be seen as annoying and a distraction to a user (not for your customers, but for everyone not using your app) given that:

  1. We bring up the keyboard, which takes up valuable real estate on screen.
  2. When we intent to bring up the software keyboard we zoom and scroll the page to give a pleasing input experience (or at least we hope it is pleasing; file bugs if not).

と、どうやらUXの観点からAppleがautofocusを望んでいないようです。

Discussion