マウスを 1 回クリックするだけで DIV 内のすべてのテキストを選択するにはどうすればよいですか?

マウスのクリックによる DIV 内のテキストの簡単な選択

DIV 要素内のテキストの選択は、ユーザーにとってシームレスなプロセスである必要があります。このガイドでは、マウスを 1 回クリックするだけでテキスト全体を強調表示する効率的な方法を説明します。

次の DIV について考えてみましょう:

<div>
<p>目的は、ユーザーが DIV 内の任意の場所をクリックできるようにすることです。完全な URL テキストが強調表示されます。これを実現するには、JavaScript の力を活用できます。</p>
<h3 id="JavaScript-の実装">JavaScript の実装</h3>
<p>この解決策の鍵は、selectText 関数にあります。</p>
<pre class="brush:php;toolbar:false">function selectText(containerid) {
  if (document.selection) { // IE
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

この関数は、引数としての DIV の ID (containerid)。ブラウザに応じて、createTextRange メソッド (IE の場合) または createRange メソッドを使用して DIV 内のテキスト全体を選択します。

HTML 統合

この機能を適用するには、次のコードを含めます。 HTML のスニペット:

<div>
<p>onclick イベント リスナーを DIV に割り当てると、selectText 関数が呼び出されます。 DIV 内の任意の場所をクリックすると、目的のテキストが選択されます。</p>
<p>この実装により、ユーザーは 1 回のクリックで DIV 要素内のテキスト全体を簡単に強調表示できるため、ユーザー エクスペリエンスが向上し、テキストの選択が簡単になります。 </p>
</div>