みかづきブログ・カスタム

基本的にはちょちょいのほいです。

iOSにおけるinput要素とuser-select: noneのコンビネーションを調査する 📱

長らくiOSのSafariでは、input要素にuser-select: noneを掛けると、フォーカス時にキーボードが表示されませんでした。
僕は、ElectronやPWAを開発することが多いので、

* {
  -webkit-user-select: none;
  user-select: none;

としてしまうことが多かったのですが、iOSのことを考えると、

:not(input) {
  -webkit-user-select: none;
  user-select: none;

としなければならなかったわけです。

しかし、最近気づいたのですが、iOS16ではuser-select: noneを掛けたinput要素でもきちんとキーボードが表示されるようになってました。
念の為、過去のバージョンも確かめてみましたが、

iOS 14.5

キーボードが表示されない

iOS15.5

キーボードが表示されない

iOS16.4

キーボードが表示される

という結果でした。

DEMO

develop.kimizuka.org

こちらのサイトで確認できます。
検証用にすべての要素に user-select: none を掛けてあります。