1. ホーム
  2. javascript

[解決済み] DIVの全テキストをシングルマウスで選択する

2022-04-27 09:52:50

質問

ユーザーがDIVをクリックしたときに、DIVタグの内容をハイライト/選択するにはどうすればよいでしょうか。アイデアは、すべてのテキストがハイライト/選択されるので、ユーザーがマウスでテキストを手動でハイライトする必要がなく、テキストの一部を見逃す可能性がない、ということです。

例えば、以下のようなDIVがあったとします。

<div id="selectable">http://example.com/page.htm</div>

...そして、ユーザーがそのURLのいずれかをクリックすると、URLのテキスト全体がハイライトされるので、選択したテキストをブラウザ内でドラッグしたり、右クリックでURL全体をコピーしたりすることが簡単にできるようになるのです。

ありがとうございます。

解決方法は?

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="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

今度はIDを引数として渡す必要がありますが、この場合は "selectable" ですが、よりグローバルなので、chiborgさんがおっしゃるように、jQueryを使わずにどこでも複数回使用することができます。