jQuery：仅在特定 div 中触发 keydown

Question

我有一个包含几个 DIV 元素的页面。当用户按下 CTRL+ENTER 按钮组合时，我需要显示（通过alert()）用户之前选择的文本。我找到了解决方案它就像一种魅力，但仍然剩下一件事。

仅当所选文本位于类为“main_content”的 DIV 内时，我才需要触发事件。我尝试将 keyup 分配给 $('DIV.main_content')，但它不起作用。

有没有办法仅在选择 $('DIV.main_content') 内的文本时才触发事件？

以下是在整个文档上触发的工作代码：

// Get user selection text on page
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.selection) {
        return document.selection.createRange().text;
    }
        return '';
}

$(document).ready(function(){
    $(document).keydown(function(e) {
        if(e.which == 13 && e.ctrlKey) {
        alert(getSelectedText());
        return false;
        }
    });
});

查看 jsFiddle 中带有标记的代码

Answer 1

getSelectedText() 函数中出现错误：window.getSelection() 返回一个 Selection 对象，而不是字符串。您将其结果传递给 alert() 的事实掩盖了这一点，因为 alert() 隐式地将传递给它的参数转换为字符串。

下面是一些代码，用于检查选择是否完全包含在具有特定类的

元素中。它适用于所有主要浏览器。

实例：http://www.jsfiddle.net/cVgsy/1/

// Get user selection text on page
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    }
    else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

function isSelectionInDivClass(cssClass) {
    var selContainerNode = null;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            selContainerNode = sel.getRangeAt(0).commonAncestorContainer;
        }
    } else if (document.selection && document.selection.type != "Control") {
        selContainerNode = document.selection.createRange().parentElement();
    }
    if (selContainerNode) {
        var node = selContainerNode;
        while (node) {
            if (node.nodeType == 1 && node.nodeName == "DIV" && $(node).hasClass(cssClass)) {
                return true;
            }
            node = node.parentNode;
        }
    }
    return false;
}

$(document).ready(function(){
    $(document).keydown(function(e) {
        if(e.which == 13 && e.ctrlKey && isSelectionInDivClass("main_content")) {
            alert(getSelectedText());
            return false;
        }
    });
});

Answer 2

这是一个有趣的问题。我有以下想法：您需要捕获 div 上的 mouseup 事件。
例如：

因此，在您的情况下，您可以执行以下操作：

var selectedText = "";
$(".yourdiv").mouseup(function(){
 if (window.getSelection) 
   selectedText = window.getSelection();

 else if (document.selection) 
    selectedText = document.selection.createRange().text;

     alert(selectedText)

});

变量 selectedText 将存储选定的文本。