¿Por qué mi Cursor Contenteditable salta al final en Chrome?

No sé por qué sucede esto, pero tuve la sensación de que tiene algo que ver con el tamaño del

, así que traté de jugar con la propiedad de display . Después de configurarlo inline-block en inline-block y de jugar un poco con el texto, descubrí que el problema desapareció después de realizar algunas ediciones, específicamente agregando una nueva línea.

Vi que, por alguna razón, la etiqueta
se mantiene en div.main después de eliminar mi nueva línea, pero la apariencia del

y la forma en que responde a las teclas de flecha es la misma que si hubiera no hay una nueva línea en él.

¡Así que reinicié el violín con el cambio de CSS y una etiqueta
en div.main y viola!

Entonces para concluir:

1. Agregar display: inline-block to div.main
2. agrega un
al final de div.main

JSFiddle Link

El problema es que su elemento contenteditable es un div , que por defecto es display: block . Esto es lo que causa su problema de posición de cuidado. Esto se puede solucionar haciendo que el div más externo no sea editable y agregando un nuevo div editable que se tratará como inline-block .

El nuevo HTML tendría un nuevo div justo dentro del externo (y la etiqueta de cierre correspondiente al final):

 
... 

Y agrega esto a tu CSS:

 div#editable { display: inline-block; } 

Con el fin de ver mejor la intercalación cuando se trata de elementos de span , también he agregado margin: 2px a la regla para div.main span en CSS, pero esto no es necesario para evitar el problema de salto de intercalación informado en la pregunta.

Aquí hay un violín .

A medida que comenzó a descubrir, contenteditable se maneja de forma incoherente en todos los navegadores. Hace unos años, comencé a trabajar en un proyecto (editor XML en el navegador) donde pensé que contenteditable haría todo más fácil. Luego, cuando desarrollé la aplicación, pronto me di cuenta de que estaba asumiendo las funciones que creía que lo que me daría la contenteditable me daría gratis. Hoy, lo único que me permite contenteditable es que enciende los eventos del teclado en los elementos que quiero editar. Todo lo demás, incluido el movimiento del cursor y la visualización del cursor, se gestiona mediante un código personalizado.

Por lo tanto, tengo una implementación ligeramente más clara de su enfoque, que se basa en el evento de input que se desencadena cuando se actualiza un campo contenteditable . Este evento no es compatible con IE, pero parece que contenteditable es bastante inseguro en IE de todos modos.

Básicamente inyecta elementos alrededor de cada elemento marcado como contenteditable="false" . Probablemente podría hacerse en la carga inicial en lugar de solo en el evento de input , pero pensé que podría haber formas de inyectar más span a la región, por lo que la input debería dar cuenta de esto.

Las limitaciones incluyen un comportamiento extraño que rodea las teclas de flecha, como te has visto a ti mismo. Sobre todo lo que he visto es que el cursor mantiene su posición correcta cuando retrocedes por los tramos, pero no cuando avanzas.

JSFiddle Link

Javascript

 $('#main').on('input', function() { var first = true; $(this).contents().each(function(){ if ($(this).is('[contenteditable=false]')) { $("").insertAfter(this); if (first) { $("").insertBefore(this); first = false } } }); }).trigger('input'); 

CSS

 div.main { width: 400px; height: 250px; border: solid 1px black; } div.main span { width:40px; background-color: red; border-radius: 5px; color: white; cursor: pointer; } i.wrapper { font-style: normal; } 

He encontrado una manera estrafalaria de resolver el problema inicial del comportamiento incorrecto del cursor al final del

con algo de JQuery. Básicamente, estoy insertando un vacío para que el cursor “cierre” al final del contenido de

. Esta etiqueta funciona para mí porque no hay diferencia de UI para el usuario final al retroceder desde el texto normal debido a la anulación font-style: normal (ver violín), y también necesitaba algo diferente a para insertar

No estoy particularmente entusiasmado con esta solución, especialmente al elegir un solo porque, pero no he encontrado una mejor alternativa, y aún así recibo mejores soluciones, ¡si es que existen! Planeo seguir trabajando en esto para poder descubrir las teclas de flecha también, pero afortunadamente solo me molesta este problema en el Fiddle y no mi código.

Fiddle (solo Chrome)

 
 item item item  

 function hackCursor() { return $('#main :last-child').get(0).tagName === 'SPAN' ? $('#main span:last-child').after('') : false; } $(function(){ hackCursor(); $('#main').bind({ 'keyup': function(e) { hackCursor(); } }) }); 

Simplemente agregue una nueva línea char ( \n ) antes de cerrar la etiqueta contenteditable . Por ejemplo, en JavaScript: var html = '

'