☰

要素内のテキストを選択する（マウスでハイライトするのと同じ） 質問する

tag-icon • tag-icon javascript jquery
要素内のテキストを選択する（マウスでハイライトするのと同じ） 質問する

ユーザーにリンクをクリックしてもらい、別の要素 (入力ではない)の HTML テキストを選択させたいと思います。

「選択」とは、マウスをドラッグしてテキストを選択するのと同じ方法を意味します。誰もが「選択」または「強調表示」を別の用語で話しているので、これを調べるのは大変でした。

これは可能ですか? これまでの私のコード:

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

何か明白なことを見逃しているのでしょうか?

ベストアンサー1

プレーンなJavascript

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

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

おすすめ記事