javascript - 文本选择(准备使用剪贴板操作)

Question

http://cdnjs.com/libraries/twitter-bootstrap/

在这个网站上，当我将鼠标悬停在给定文本被选中的链接上时(就像鼠标文本选择而不是 css 样式)。

我试图检查 inspect 元素中发生了什么变化，但我没有找到。

我试图找出 js 或 jquery 是否有执行此操作的方法。 我找到了 jquery 的 .select() 方法，但它只能在表单元素上使用，而且 jquery 中没有 deselect() 方法，所以它肯定没有。

那么幕后是什么？

更新:

我找到了这个solution 我在 jsfiddle 试过了它工作完美。 但它是用带有 dom 节点操作的 js 编写的，对我来说它看起来就像希腊语和拉丁语。我无法编写此算法的 jquery 版本。

HTML:

<p id="selectable">hello</p>

JS:

function fnSelect(objId) {
    fnDeSelect();
    if (document.selection) {
    var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(objId));
    range.select();
    }
    else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(objId));
    window.getSelection().addRange(range);
    }
}

function fnDeSelect() {
    if (document.selection) document.selection.empty(); 
    else if (window.getSelection)
            window.getSelection().removeAllRanges();
}

$(document).ready(function(){
    $("p").on("mouseover",function(){
        var id = $(this).attr("id");
        fnSelect(id);
    });    
    $("p").on("mouseout",function(){
        fnDeSelect();
   });
});

Answer 1

发现这个比它应该的更麻烦。这正是您可以使用的:

From MDN:

window.getSelection().selectAllChildren(elementObject);

Extended studies found here (MDN again)

如果是我，我会这样实现效果:

function onMouseOver(e) {
    window.getSelection().selectAllChildren(e.currentTarget);
}
function onMouseOut(e) {
    window.getSelection().removeAllRanges(e.currentTarget);
}
document.getElementById("top").addEventListener("mouseenter", onMouseOver, false);
document.getElementById("top").addEventListener("mouseleave", onMouseOut, false);

Live Demo :)