在元素中选择文本(类似于用鼠标突出显示)?

  • 回答 (2)
  • 关注 (0)
  • 查看 (59)

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

这个问题有什么比较明显的错误吗 ?

MaybeMaybe提问于
Tabor

Tencent · Content Operation (已认证)

一个会花式跑脚本的boy~回答于

这里有一个没有浏览器嗅探,不依赖于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);
HERO坑货深漂程序猿回答于

找到了一个解决方案,感谢TheVillageIdiot发现的这个线程。我可以修改给定的信息,并将其与一些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);
    }
}

自从这个答案被更新之后已经有一段时间了,自从我问及回答这个问题以来,我从开发者那里学到了很多东西。它也得到了比我想象的更多的关注。我想提供一个更好的解决方案,比我发布的原始的,一个不依赖于jQuery的方法,或jQuery的所有事情。你可以使用jQuery来帮助你吗?当然,但是如果你可以在没有jQuery的情况下实现相同的结果,并且使用功能检测代替浏览器嗅探,为什么不呢?所以下面是我更新的答案:

function SelectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}
document.onclick = function(e) {    
    if (e.target.className === 'click') {
        SelectText('selectme');
    }
};
<div id="selectme"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click">Click me!</p>

扫码关注云+社区

领取腾讯云代金券