jQuery: Déclenchement du clavier uniquement dans une division spécifique

Question

J'ai une page avec deux éléments DIV. Lorsque l'utilisateur appuie sur la combinaison de touches CTRL + ENTRÉE, je dois afficher (via alert()) le texte, cet utilisateur précédemment sélectionné. J'ai trouvé le solution et cela fonctionne comme un charme, mais il reste encore une chose à faire.

J'ai besoin de déclencher un événement, seulement lorsque le texte sélectionné est dans un DIV avec la classe "main_content". J'ai essayé d'affecter keyup à $ ('DIV.main_content'), mais cela ne fonctionne pas.

Existe-t-il un moyen de déclencher l'événement uniquement si le texte à l'intérieur de $ ('DIV.main_content') est sélectionné?

Voici un code de travail qui déclenche l'ensemble du 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

Answer 1

Vous avez une erreur dans la fonction getSelectedText(): window.getSelection() retourne un objet Selection, pas une chaîne. Le fait que vous transmettez le résultat à alert() masque ceci, car alert() convertit implicitement l'argument passé en une chaîne.

Voici un code pour vérifier si la sélection est complètement contenue dans un élément <div> avec une classe particulière. Cela fonctionne dans tous les principaux navigateurs.

Un exemple concret: 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

Il est question intéressante. J'ai l'idée suivante: vous devez attraper l'événement mouseup sur div. Par exemple:

Ainsi, dans votre cas, vous pouvez faire quelque chose comme ceci:

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

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

    alert(selectedText) 

}); 

et variable selectedText sera stocker le texte sélectionné.