jQuery: Trigger keydown only in specific div

I have a page with couple of DIV elements. When user presses the CTRL+ENTER button combo, I need to display (via alert()) the text, that user previously selected. I found the solution and it works like a charm, but there is still one thing lef开发者_StackOverflow社区t.

I need to make event trigger, only when selected text is inside a DIV with class "main_content". I've tried to assign keyup to $('DIV.main_content'), but it does not work.

Is there a way to make event trigger only if text inside $('DIV.main_content') selected?

Here is a working code that triggers on the whole document:

// 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

You have an error in the getSelectedText() function: window.getSelection() returns a Selection object, not a string. The fact you're passing the result of this to alert() is masking this, because alert() implicitly converts the argument passed to it into a string.

Here's some code to check whether the selection is completely contained within a <div> element with a particular class. It works in all major browsers.

Live example: 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;
        }
    });
});

It is interesting question. I have the following idea: you need to catch mouseup event on div. For example:

So, in your case you can do something like this:

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

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

     alert(selectedText)

});

And variable selectedText will be store selected text.