En un div de contenido editable, quiero que el usuario escriba algo dentro de un elemento en línea. Por lo tanto, cuando el cursor está dentro de este elemento en línea y el usuario usa la tecla de flecha izquierda, el cursor debe saltar a la posición 0 DENTRO del elemento en línea.
Aquí hay un ejemplo:
document.querySelector("#editable").addEventListener("keydown", (e) => { const keys = ["ArrowLeft", "ArrowRight"] if (keys.includes(e.code)) { // handle event const selection = document.getSelection() if (!selection || !selection.anchorNode) { return } if (selection.anchorNode.parentElement.nodeName !== "MARK") { return } e.preventDefault() const setOffset = offset => { const range = document.createRange() range.collapse() range.setStart(selection.anchorNode, offset) selection.removeAllRanges() selection.addRange(range) } if (e.code === keys[0]) { setOffset(0) } if (e.code === keys[1]) { setOffset(selection.anchorNode.textContent.length) } } }) #editable { border: 1px solid black; padding: 10px; } <div id="editable" contentEditable> Here is some <mark>text</mark> for testing! </div> El problema es que setOffset(0) coloca el cursor antes de la etiqueta <mark> y al escribir allí, el texto no aparece dentro de la etiqueta <mark> .
Por otro lado, usar la flecha derecha y configurar el cursor en el último elemento setOffset(selection.anchorNode.textContent.length) funciona como se esperaba (escribir allí extiende la etiqueta de marca).
¿Hay algún truco para colocar el cursor en la posición 0 dentro del elemento en línea?