マウスのクリック時に DIV 内のすべてのテキストをプログラムで選択するにはどうすればよいですか?

マウスクリックでプログラム的に DIV テキストを選択する

質問

テキストコンテンツを含む DIV 要素が与えられた場合、ユーザーはその中のテキスト全体をプログラム的に選択するにはどうすればよいですか?マウスを 1 回クリックするだけで DIV を変更できますか?これにより、ユーザーは選択したテキストを簡単にドラッグ アンド ドロップしたり、直接コピーしたりできます。

解決策

マウスを 1 回クリックして DIV 要素内のテキストを選択するには、次の JavaScript 関数を利用できます。 :

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);
    }
}

実装

これを実装するには機能:

1. JavaScript コードに上記の関数を含めます。
2. クリック イベント ハンドラーを DIV 要素に追加し、DIV の ID を引数として selectText() 関数を呼び出します。

<div><p>このコードでは、ユーザーが DIV 要素内の任意の場所をクリックすると、その内のテキスト全体がその DIV が強調表示されて選択され、簡単に操作またはコピーできるようになります。</p></div>

以上がマウスのクリック時に DIV 内のすべてのテキストをプログラムで選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。