¿Cómo puedo obtener el elemento se encuentra el cursor con Javascript, al utilizar contentEditable?

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

Pregunta

Vamos a decir que tengo algo de código HTML siguiente: 

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

Ahora el cursor (el cursor) parpadea en el interior del elemento H1, digamos que en la palabra "título". ¿Cómo puedo obtener el nombre del elemento se encuentra el cursor con JavaScript? Aquí me gustaría conseguir "H1".

Esto tiene que trabajar sólo en WebKit (que está incrustado en una aplicación). Debe preferiblemente también trabajar para las selecciones.

¿Fue útil?

Solución

En primer lugar, piense en ¿Por qué que estás haciendo esto. Si usted está tratando de evitar que los usuarios modifiquen ciertos elementos, acaba de establecer contenteditable en false en esos elementos.

Sin embargo, es posible hacer lo que se le pregunte. El código siguiente funciona en Safari 4 y devolverá el nodo de la selección está anclado en (es decir, cuando el usuario comenzó a seleccionar , la selección de "hacia atrás" devolverá al final en lugar de inicio) - si quieres el tipo de elemento como una cadena, acaba de obtener la propiedad nodeName del nodo devuelto. Esto funciona para selecciones de longitud cero, así (es decir, sólo una posición de intercalación). 

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top