¿Cómo puedo obtener el elemento en el que está el cursor con Javascript, cuando se usa contentEditable?

Digamos que tengo un poco de código HTML siguiente manera:¿Cómo puedo obtener el elemento en el que está el cursor con Javascript, cuando se usa contentEditable?

<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 en el que está el cursor con JavaScript? Aquí me gustaría obtener "h1".

Esto necesita funcionar solo en WebKit (está incrustado en una aplicación). Preferiblemente también debería funcionar para selecciones.

Fuente

2009-07-29 Lucas

En primer lugar, piense en por qué usted está haciendo esto. Si intenta evitar que los usuarios editen ciertos elementos, simplemente configure contenteditable como falso en esos elementos.

Sin embargo, es posible hacer lo que solicite. El siguiente código funciona en Safari 4 y devolverá el nodo en el que está anclada la selección (es decir, donde el usuario comenzó a seleccionar, seleccionando "hacia atrás" devolverá el final en lugar del inicio) - si desea el tipo de elemento como cadena, solo obtenga la propiedad nodeName del nodo devuelto. Esto también funciona para selecciones de longitud cero (es decir, solo una posición de intercalación).

function getSelectionStart() { 
    var node = document.getSelection().anchorNode; 
    return (node.nodeType == 3 ? node.parentNode : node); 
}

Fuente

2009-07-31 11:13:35 You

No estoy tratando de bloquear al usuario de ninguna manera, realmente solo necesito el nombre del nodo para poder actualizar una parte de la IU. Gracias por proporcionar la respuesta, esto funciona muy bien. – Lucas

'node.nodeType == 3' sería una mejor verificación para un nodo de texto. –

Al usar esto en un HTMLEditor de JavaFX, esto funciona bien al devolver el elemento donde se coloca el cursor/text caret en una sección contentEditable, ¡gracias! Como nota al margen, document.activeElement se reconoce pero siempre devuelve el elemento del cuerpo que no es muy útil. –

¿Cómo puedo obtener el elemento en el que está el cursor con Javascript, cuando se usa contentEditable?

Respuesta

Cuestiones relacionadas