contenteditable put caret fuera de tramo insertado

http://jsfiddle.net/VzbYJ/86/

Por favor, eche un vistazo a este enlace. Como se borra, va a insertar un nodo span en el lugar de intercalación. El problema es que, después de insertar el nodo, si presiono cualquier carácter, su color también es verde. porque también viene dentro del elemento span. Entonces, ¿cómo puedo colocar el cursor después del tramo para que el color del siguiente nodo insertado permanezca normal?

Intenté encontrar el nodo seleccionado (basado en la posición de intercalación), establecí el rango después del elemento y utilicé el colapso (falso). Pero no pude obtener el resultado deseado.

Código para encontrar el nodo:

function findNode(event) { if (event.type == 'click') par = event.target; else if (event.type == 'keyup'){ if (document.selection) par = document.selection.createRange().parentElement(); else if (window.getSelection){ var range = window.getSelection().getRangeAt(0); par = range.commonAncestorContainer.parentNode; } } 

y luego establezco el límite usando setEndAfter () ant collapse (false). Soy nuevo en este campo, por lo que no estoy seguro de que esté en lo cierto. Entonces cualquier sugerencia es muy apreciable. Gracias por adelantado.

Un vistazo rápido a la sección “Relacionados” en esta misma página le dará enlaces a toda la información que necesita. En resumen, el navegador (a menos que sea Firefox) lo impide y la solución más fácil es insertar un carácter de espacio de ancho cero (Unicode U+200B ) después del elemento insertado. Además de ser un hack muy feo, esto tiene el problema de hacer un seguimiento y eliminar estos espacios de ancho cero una vez que ya no son necesarios.

He actualizado su jsFiddle para usar este enfoque, pero sin ningún código para eliminar los espacios de ancho cero:

http://jsfiddle.net/VzbYJ/87/

Para antecedentes, aquí hay una lista de preguntas / respuestas relevantes:

  • Establecer la posición de intercalación en un nodo vacío dentro de un elemento contentEditable
  • https://stackoverflow.com/a/15814297/96100
  • Colocación del cursor fuera de la etiqueta insertada en ContentEditable
  • Establecer la posición de intercalación en un nodo vacío dentro de un elemento contentEditable

Necesito una respuesta estándar para esto, aparece con tanta frecuencia …

Esta es una publicación anterior, y esto es parte de la solución al problema. Hay enfoques más complejos que no he terminado de elaborar, pero lo simple siempre es bueno.

 const editor = document.querySelector('[contenteditable="true"]'); const spans = document.querySelectorAll('span[contenteditable="false"]'); Array.prototype.slice.call(spans).map(span => { const empty = document.createTextNode( '\uFEFF' ); const parentEl = span.parentElement; const allchildnodes = editor.childNodes; const lastsib = allchildnodes[allchildnodes.length - 1]; const ended = lastsib.wholeText === '\n'; const prevsib = ended ? lastsib.previousSibling === span : false; if (prevsib) { parentEl.appendChild(empty); } }); 

https://codepen.io/augur/pen/MvaKJO