[解決済み] 要素内のテキストを選択する（マウスでハイライトするようなイメージ）。

質問

ユーザーがリンクをクリックすると、別の要素( ではなく 入力)。

select"とは、マウスをドラッグしてテキストを選択するのと同じような意味です。これは、誰もが他の用語で "select" または "highlight" を話すので、調査するのが大変でした。

これは可能なのでしょうか？今のところ私のコード

HTMLです。

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JSです。

function SelectText(element) {
    $("#" + element).select();
}

何かあからさまに見落としているのでしょうか？

解決方法は？

プレーンなジャバスクリプト

function selectText(node) {
    node = document.getElementById(node);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));

<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>

以下は 動作デモ . jQueryのプラグインを探している人のために、私は もその一つ .

jQuery（オリジナル回答）

での解決策を見つけました。 このスレッド . 私は与えられた情報を修正し、jQueryのビットと混合して、ブラウザに関係なく、任意の要素内のテキストを選択する全く素晴らしい関数を作成することができました。

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}