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

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 signe (le clignotement du curseur) clignote à l'intérieur de l'élément H1, disons que dans le mot "tête". Comment puis-je obtenir le nom de l'élément le signe est avec du JavaScript? Ici, je voudrais obtenir un "h1".

Ce doit travailler seulement dans WebKit (il est intégré dans une application). Il doit, de préférence travaillent également pour les sélections.

InformationsquelleAutor Lucas | 2009-07-29
  1. 44

    Tout d'abord, pensez à pourquoi vous êtes en train de faire cela. Si vous êtes à essayer d'empêcher les utilisateurs de modifier certains éléments, il suffit de définir contenteditable à faux sur ces éléments.

    Cependant, il est possible de faire ce que vous demandez. Le code ci-dessous fonctionne dans Safari 4 et sera de retour le nœud de la sélection est ancrée dans l' (par exemple, lorsque l'utilisateur commencé à sélectionner, en sélectionnant "à l'envers" sera de retour à la fin au lieu de départ) – si vous voulez que le type d'élément comme une chaîne de caractères, il suffit de faire la nodeName propriété de retour de nœud. Cela fonctionne pour les zéro-longueur sélections (c'est à dire juste un signe position).

    function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}
    • Je ne suis pas en train de bloquer l'utilisateur de toute façon, j'ai vraiment juste besoin du nom du nœud afin que je puisse mettre à jour une partie de l'INTERFACE utilisateur. Merci de la réponse, cela fonctionne très bien.
    • node.nodeType == 3 serait mieux de vérifier pour un nœud de texte.
    • L'utilisation de ce dans une JavaFX HTMLEditor cela fonctionne très bien retourner l'élément sur lequel le curseur / curseur de texte est placé dans un contentEditable l'article, merci! Comme une note de côté, document.activeElement est reconnue, mais renvoie toujours l'élément de corps qui n'est pas très utile.
    • Cela ne semble pas fonctionner sur Firefox? : /
    InformationsquelleAutor You