javascript - jQuery:仅在特定 div 中触发 keydown

Question

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

仅当所选文本位于类为“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;
        }
    });
});

See the code with markup in jsFiddle

Answer 1

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

下面是一些代码，用于检查所选内容是否完全包含在 <div> 中。具有特定类的元素。它适用于所有主要浏览器。

实例: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;
        }
    });
});