Comment savoir si le texte sélectionné se trouve dans une division spécifique

J'ai deux divs comme indiqué ci-dessous:

<div id="div1"> <p>something</p> <div><table><tr><td>Div1</td></tr></table></div> </div> <div id="div2"> <p>something else</p> <div><table><tr><td>Div2</td></tr></table></div> </div> <button type="button">Check</button>

Maintenant, je veux savoir quand un texte est sélectionné, puis le bouton est pressé, si le texte sélectionné est sous "div1" ou non. Comment puis je faire ça?

Edit: Et la solution doit fonctionner dans IE-7 et ci-dessus.

La fonction elementContainsSelection() ci-dessous renvoie un booléen représentant si l'élément spécifié contient l'ensemble de la sélection de l'utilisateur et fonctionne dans tous les principaux navigateurs, y compris IE 6.

Démo en direct: http://jsfiddle.net/eT8NQ/

Code:

 function isOrContains(node, container) { while (node) { if (node === container) { return true; } node = node.parentNode; } return false; } function elementContainsSelection(el) { var sel; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount > 0) { for (var i = 0; i < sel.rangeCount; ++i) { if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) { return false; } } return true; } } else if ( (sel = document.selection) && sel.type != "Control") { return isOrContains(sel.createRange().parentElement(), el); } return false; }

Vous pouvez observer un événement mouseup sur chaque div et lier la méthode suivante:

 var endpoint = null function getselected(event){ endpoint = event.target; var t = ''; if(window.getSelection){ t = window.getSelection(); }else if(document.getSelection){ t = document.getSelection(); }else if(document.selection){ t = document.selection.createRange().text; } return t; }

Cette méthode renverra le texte sélectionné, il vous indiquera que le processus de sélection s'est terminé sur le div qui a déclenché l'événement. Si vous avez besoin du point de départ, vous devez lier un événement mousedown aux divs, qui stockeront les éléments id dans une variable, afin que vous puissiez déterminer le début et le point final du processus de sélection et découvrir les divs qui se situent entre les deux.

 var startpoint = null; function beginSelection(event){ startpoint = event.target; }

Si la méthode getSelected renvoie une chaîne vide, vous devez réinitialiser le début et le point final.

quelque chose comme:

 function checkSelection() { function checkNode(node) { do { if(node.id == "div1") return true; } while(node = node.parentNode); return false; } if(window.getSelection) { var selection = window.getSelection(); for(var i = 0, l = selection.rangeCount; i < l; i++) { var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer; if(checkNode(start) || (start != end && checkNode(end))) return true; } } if(window.scelection && window.selection.createRange) { var range = window.selection.createRange(); if(range) return checkNode(range.parentElement()); } return false; }

@TimDown Cela renvoie toujours false s'il s'agit d'un «nœud» ou non

 if ( (sel = document.selection) && sel.type != "Control") { return isOrContains(sel.createRange().parentElement(), el); }