Comment puis-je obtenir l'élément le caret est avec Javascript, lors de l'utilisation contentEditable?

StackOverflow https://stackoverflow.com/questions/1197401

Question

Disons que j'ai un code HTML comme ceci: 

<body contentEditable="true">
   <h1>Some heading text here</h1>
   <p>Some text here</p>
</body>

Maintenant, le caret (le curseur clignotant) clignote dans l'élément H1, disons que le mot « titre ». Comment puis-je obtenir le nom de l'élément le caret est avec JavaScript? Ici, je voudrais obtenir « h1 ».

Cela doit fonctionner uniquement dans WebKit (il est intégré dans une application). Il devrait de préférence travailler aussi pour les sélections.

Était-ce utile?

La solution

Tout d'abord, pensez à pourquoi vous faites cela. Si vous essayez d'arrêter les utilisateurs de modifier certains éléments, vient de mettre contenteditable false sur ces éléments.

Cependant, il est possible de faire ce que vous demandez. Le code ci-dessous fonctionne dans Safari 4 et retournera le nœud la sélection est ancrée dans (là où l'utilisateur a commencé à sélectionner , en sélectionnant « arrière » retournera la fin au lieu du début) - si vous voulez le type d'élément sous forme de chaîne, juste obtenir la propriété nodeName du nœud retourné. Cela fonctionne pour les sélections de longueur nulle et (dire juste une position de caret). 

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top