Quiero establecer la posición del cursor/intercalación manualmente. Esto funciona bien si los contenidos son solo texto en un contenido contenteditable . Pero si el contenido contiene texto en negrita, subrayado, etc., entonces no funciona y arroja un error.
Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 2.en el ejemplo a continuación, si ingresa "0" en el número de nodo, el cursor se mueve. Pero si ingresa "1" en el número de nodo, arroja un error. ¿Qué tiene de malo mover el cursor sobre el texto en negrita?
button.onclick = () => { let range = new Range(); range.setStart(p.childNodes[node.value], start.value); document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }; <p id="p" contenteditable="true">This is <b>bold</b></p> Cursor Position <input id="start" type="number" value="2"> Node number <input id="node" type="number" value="0"> <button id="button">Mover Cursor</button>En su ejemplo, p.childNodes[1] se resuelve en el nodo <b>bold</b> . Solo puede saltar al principio o al final de su texto (índice 0 y 1), ya que está viendo el nodo como un todo. Si desea colocar el cursor dentro de este nodo, debe acceder a su contenido textual real.
Si bien no funciona para casos más complejos, esto debería empujarlo en la dirección correcta:
let childNode = p.childNodes[node.value]; while (childNode.hasChildNodes()) { childNode = childNode.firstChild; } range.setStart(childNode, start.value);