JavaScriptでテキストボックス内の文字列を全範囲選択する

更新：2018-12-29

自分では使うことはないと思っていた機能だが、とあるツールを作る際、JavaScriptを使ってテキストボックス内の文字列を自動的に選択するようにした。ユーザー側でWindowsであればCtrl+A、Ctrl+Cなど操作してもらえば良いので、必ずしも必要な機能ではないが、スマホからのアクセスもあるし、他のサイトでもわりとよく見かけるので実装することにした。ただ、勝手に選択されるのが煩わしいと思う人もいるかもしれないので注意した方が良い。

まず、テキストボックスをクリックまたはタップした際、addEventListener()でイベントが起こるようにする。ここでは3つの方法をまとめて記す。コードの例は以下の通り。

<input type="text" id="ex_result" value="東京都中央区">

<script>
document.getElementById("ex_result").addEventListener('click', function(){
    var text = document.getElementById("ex_result");
    //text.select();
    text.setSelectionRange(0, text.value.length);
    //text.selectionStart = 0;
    //text.selectionEnd = text.value.length;
}, false);
</script>

select()メソッドは古くからあるので、どのブラウザでも動作するだろうと安易に考えて試していたら、残念なことにiOSのモバイルSafariで動作しなかった。昨今、iPhoneやiPadなどからのアクセスが多いため、この方法は却下となった。

次にsetSelectionRange()というメソッドがある。選択する開始と終了の位置を指定できるが、ここでは全範囲選択なのでゼロからtext.value.lengthまでとした。

また、selectionStartとselectionEndというものもあり、これも同様にそれぞれ開始と終了の位置が指定できる。ただ、setSelectionRange()の方がシンプルで良いかもしれない。

上記コードは3種類記述してコメントアウトしているが、自分が使いたいものだけ使えば良い。一応パソコンとスマホで、2018年現在最新のブラウザで動作を確認した。 Internet Explorer 11でも動作した。また、もちろん<textarea>要素でも使える。

JavaScriptでテキストボックス内の文字列を全範囲選択する

カテゴリ