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

もきち もきち 2020.01.24

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

今回は、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を使わずに実装してみるのもいいかもしれませんね。

 

 

スポンサーリンク

POPULAR

もきち

書いた人

もきち

Director / Creator