如何在文本区域和输入之外检测选择

Question

jQuery select事件仅限于textarea和input:text 。 有没有办法处理普通元素（例如<div> ？

Answer 1

jQuery的select事件包装了本机浏览器的select事件，该事件会在IE和WebKit中针对任何类型的选择触发，但仅对其他浏览器中的输入和文本区域触发。

这个问题之前已经提出过几次：

• Javascript中的选定文本事件触发器
• 我可以从文本或textarea之外的文本选择中获得Javascript事件吗？

您会看到很多与卢克类似的答案，但没有一个完全有效。 首先，您需要考虑通过键盘进行的选择，以及通过“编辑”和上下文浏览器菜单中的“全选”选项。 其次，通过查看选择文本来检查选择中的更改并不完全可靠：如果用户在文档的其他位置选择了相同的文本，则不会被选中。

这是一些可以解决大多数问题的代码，尽管没有轮询选择内容，但是对于“编辑”和上下文菜单中的“全选”，您无能为力。

var addSelectHandler = function(callback) {
    var selectionChangeEventHandler;

    if (typeof window.getSelection != "undefined" && typeof document.addEventListener != "undefined") {
        var previouslySelected = null;

        var rangesEqual = function(r1, r2) {
            return r1.startContainer === r2.startContainer && r1.startOffset === r2.startOffset &&
                   r1.endContainer === r2.endContainer && r1.endOffset === r2.endOffset;
        };

        selectionChangeEventHandler = function() {
            var sel = window.getSelection(), selectedRanges = [], range;
            var changed = !previouslySelected || (sel.rangeCount != previouslySelected.length);
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                range = sel.getRangeAt(0).cloneRange();
                selectedRanges[i] = range;
                if (!changed && !rangesEqual(range, previouslySelected[i])) {
                    changed = true;
                }
            }
            previouslySelected = selectedRanges;
            if (changed) {
                callback();
            }
        };

        document.addEventListener("mouseup", selectionChangeEventHandler, false);
        document.addEventListener("keyup", selectionChangeEventHandler, false);
    } else if (typeof document.selection != "undefined" && typeof document.attachEvent != "undefined") {
        // This is IE, which fires a selectionchange event for any selection
        document.attachEvent("onselectionchange", callback);
    }
};

addSelectHandler(function() {
    alert("Selection changed");
}

Answer 2

function getSelText()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
    }
    return txt;
}

$(document).mouseup(function() {
    alert(getSelText());
});

我不知道jQuery是否有一个，但是它可以用来制作一个新的插件，在那里您可以为mouseup连接一个事件。