选择元素中的文本（类似于使用鼠标突出显示）

我想让用户点击一个链接，然后在另一个元素（不是输入）中选择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();
}

我错过了明显的东西吗？

---

纯Javascript

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：

function selectElementText(el, win) {
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}

selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);

---

Jason的代码不能用于iframe中的元素（因为范围与窗口和文档不同）。 我修复了这个问题，并修改了它，以便用作其他任何jQuery插件（可链接）：

示例1：通过单击选择<code>标签内的所有文本并添加“selected”类：

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

例2：点击按钮，选择一个Iframe内的元素：

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

注意：请记住，iframe源应驻留在同一个域中以防止安全错误。

jQuery插件：

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

我在IE8，Firefox，Opera，Safari，Chrome（当前版本）中测试过它。 我不确定它是否适用于较旧的IE版本（我真的不在乎）。

链接地址: http://www.djcxy.com/p/35419.html

上一篇: Selecting text in an element (akin to highlighting with your mouse)

下一篇: jQuery Set Cursor Position in Text Area