jquery:选择文本事件

Bin*_*hen 10 javascript jquery

是否有可能当用户选择一些文本(非文本区域或输入)时,jquery可以调用我的回调让我知道选择了哪个div文本,如果选择焦点丢失也可以调用我的回调?

谢谢.

Tim*_*own 9

有些令人惊讶的是,没有简单的方法可以做到这一点.IE有一个在所有元素上实现的select事件,但是其他浏览器从未将其扩展到输入之外.您将不得不处理整个文档中的事件keyupmouseup事件,即使这样,当选择未实际更改时,也可能会调用回调.


2013年10月13日更新

WebKit浏览器已经selectionchangeDocument节点上支持了几年的事件.IE也支持此事件回到5.5版.例:

document.onselectionchange = function() {
    console.log("Selection changed");
};
Run Code Online (Sandbox Code Playgroud)

这是一个简单的例子:

function selectCallback(selectionParentElement) {
    console.log("Selecting, parent element is " + selectionParentElement.nodeName);
}

var mouseOrKeyUpHandler;

if (typeof window.getSelection != "undefined") {
    // Non-IE
    mouseOrKeyUpHandler = function() {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (range.toString()) {
                var selParentEl = range.commonAncestorContainer;
                if (selParentEl.nodeType == 3) {
                    selParentEl = selParentEl.parentNode;
                }
                selectCallback(selParentEl);
            }
        }
    };
} else if (typeof document.selection != "undefined") {
    // IE
    mouseOrKeyUpHandler = function() {
        var sel = document.selection;
        if (sel.type == "Text") {
            var textRange = sel.createRange();
            if (textRange.text != "") {
                selectCallback(textRange.parentElement());
            }
        }
    };
}

document.onmouseup = mouseOrKeyUpHandler;
document.onkeyup = mouseOrKeyUpHandler;
Run Code Online (Sandbox Code Playgroud)