Tengo un elemento <p> simple como contenteditable con una función de formato, que formatea el texto sobre la marcha (en el evento de entrada) y mueve el signo de intercalación al final del texto (porque la actualización de HTML interno en contenteditable mueve el signo de intercalación al principio de el texto).
Entonces, en Chrome todo funciona bien, el texto se formatea a medida que escribe, pero cuando usa Firefox, los espacios en blanco finales se eliminan a medida que escribe, por lo que realmente no puede escribir dos palabras separadas, porque cada vez que presiona espacio al final del primera palabra, se recorta.
¿Alguna idea de por qué el comportamiento es diferente en Firefox?
Violín: https://jsfiddle.net/mt8cp2sd/
const content = document.getElementById('content'); content.innerHTML = 'Type text here'; function formatText(text) { return text.replaceAll('#', '<b>#</b>'); } content.addEventListener('input', () => { content.innerHTML = formatText(content.innerText); let range = document.createRange(); range.selectNodeContents(content); range.collapse(false); let selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }); #content { border: solid 1px #555; } <html> <body> <p id="content" contenteditable> </p> </body> </html>Firefox agrega <br> al ingresar un espacio, mientras que Chrome agrega .
Puede configurar la propiedad css de white-space de su contenido editable en contenteditable -moz-pre-space para solucionar esto.
A continuación se muestra el código de trabajo:
const content = document.getElementById('content'); function formatText(text) { return text.replaceAll('#', '<b>#</b>'); } content.addEventListener('input', () => { content.innerHTML = formatText(content.innerText); let range = document.createRange(); range.selectNodeContents(content); range.collapse(false); let selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }); let data = ''; content.innerHTML = 'Type text here'; #content { border: solid 1px #555; white-space: -moz-pre-space; } <html> <body> <p id="content" contenteditable> </p> </body> </html>