jQuery: Trigger Keydown nur in bestimmten div

Question

Ich habe eine Seite mit ein paar DIV-Elemente. Wenn Benutzer die Tastenkombination STRG + EINGABETASTE drückt, muss ich den Text anzeigen, den der Benutzer zuvor ausgewählt hat (via alert()). Ich fand die solution und es funktioniert wie ein Charme, aber es ist noch eine Sache übrig.

Ich muss Ereignis auslösen, nur wenn der ausgewählte Text in einem DIV mit der Klasse "main_content" ist. Ich habe versucht, keyup zu $ ​​('DIV.main_content') zuzuweisen, aber es funktioniert nicht.

Gibt es eine Möglichkeit, Ereignis auszulösen, nur wenn Text in $ ('DIV.main_content') ausgewählt ist?

ist hier ein Arbeitscode, der auf das gesamte Dokument löst:

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

Sie haben einen Fehler in der Funktion getSelectedText(): window.getSelection() ein Selection Objekt zurückgibt, kein String. Die Tatsache, dass Sie das Ergebnis davon an alert() übergeben, maskiert dies, weil das übergebene Argument implizit in eine Zeichenfolge konvertiert.

Hier ist ein Code, um zu überprüfen, ob die Auswahl vollständig in einem <div> Element mit einer bestimmten Klasse enthalten ist. Es funktioniert in allen gängigen Browsern.

anschauliches Beispiel: 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

Es ist interessant Frage. Ich habe die folgende Idee: Sie müssen mouseup Ereignis auf div fangen. Zum Beispiel:

in Ihrem Fall So können Sie etwas tun:

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

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

    alert(selectedText) 

}); 

und variable SelectedText wird speichern markierten Text sein.