ホームページ > ウェブフロントエンド > CSSチュートリアル > マウスのクリック時に DIV 内のすべてのテキストをプログラムで選択するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-11 17:52:10
オリジナル
527 人が閲覧しました

How Can I Programmatically Select All Text Within a DIV on Mouse Click?

マウスクリックでプログラム的に 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>
ログイン後にコピー

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート