📖
iOSのMobile Safariではinputのautofocus属性が効かない
※本記事の内容は躓いた事象に対するメモに留まっており、問題解決の方法を提示しているものではありません。
動作確認用
- iOS Mobile Chromeでアクセスすると、autofocusされます。
- 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:
- We bring up the keyboard, which takes up valuable real estate on screen.
- 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