iOSでテキストボックスのフォーカス時に全選択する方法【JavaScript】

こんにちは。もきちです。

今回は、JavaScriptでテキストボックスのフォーカス時に全選択状態にする方法をご紹介します。

基本的にはjQueryの.select()を使えば楽なんですが、実はこのやり方には問題がありまして…

iOSでは上手く動きません！

iOSではjQueryのselect()を使っても全選択が動かない

PCやAndroid端末では、jQueryのselect()を使えば、基本的に全選択が可能です。

でも、iOSだけバージョンによっては動かないんです…。

iOSのバージョンによる違い

最近のiOSのバージョンでは、jQueryのselect()でも実行されるようです。

試しに手持ちのデバイスで実行してみました。

• iPadOS　〇
• iOS13.3　〇
• iOS12.4　×

この結果から見て、おそらくiOS13から対応されたんだと思います！

でも、流石にまだiOS12は切り捨てられませんよね…。

というわけで、別の方法をご紹介します。

iOS13未満でフォーカス時に全選択するときのやり方

iOS13未満でテキストボックスのテキスト全選択を実現するには、下記の記述が有効です。

iOS12はまだまだシェア率が高いので、基本的にこのやり方をおすすめします！

jQueryを使わない場合もこのやり方でOK！

このやり方のもう1つのメリットは、jQueryを使わなくても動くことです。

最近は脱jQueryの流れが強いですし、これを機にjQueryを使わずに実装してみるのもいいかもしれませんね。