Contenteditable agrega un cuando llego al espacio

4 minutos de lectura

avatar de usuario
Jordán

No estoy seguro de por qué, pero si tiene un elemento con contenteditable habilitado, la primera vez que ingrese un espacio, agregará un <br> etiqueta en el elemento. Si el elemento tiene un espacio en él por defecto (<p contenteditable="true">this is a test</p>), estará bien, pero tan pronto como el usuario presiona la barra espaciadora (o incluso copia y pega un carácter de espacio), Firefox agrega un <br _moz_dirty="" /> hacia <p>.

¿Alguien tiene alguna idea de por qué o una solución simple? Esta es la primera vez que juego con contenteditable, así que mucho de esto es nuevo para mí. Por el momento, solo estoy usando $('br').remove() que parece estar funcionando, pero me encantaría una explicación y una forma adecuada de evitarlo si alguien sabe.

  • ¿Es esto todavía reproducible? Nunca me he encontrado con un error así en FF

    – YakovL

    30 de julio de 2016 a las 14:34

  • Tengo el mismo problema, jsbin.com/xarirotali/edit?html,css,salida Presione dos espacios al final de ‘algún texto’ e inspeccione el elemento p en FF y agregará un
    .

    –Jonathan Andersson

    1 de noviembre de 2016 a las 13:36

  • Una forma de resolver este problema ocultando interrupciones en contenteditables con CSS: p[contenteditable="true"] br {display:none;} Sin embargo, esto también evitará que el retorno de carro se mueva a una nueva línea.

    – jla

    20 de octubre de 2018 a las 8:11

  • @jla eso resolvió mi problema, gracias.

    – Panda rojo enojado

    17 de noviembre de 2018 a las 14:05

Me encontré con esto hoy y tampoco sé por qué Firefox lo hace. Lo he tratado así.

function zapTrailingLinebreak (editableNode) {
    let children = Array.from(editableNode.childNodes)

    children.forEach(child => {
        if (children.indexOf(child) == children.length - 1) {
            if (child.tagName && child.tagName === "BR") {
                editableNode.removeChild(child)
            }
        } 
    })
}

  • iteración inútil en niños cuando todo lo que quieres es el último <br>: [...editableNode.childNodes].pop().tagName == "BR" verificará si el último niño es un <br>. necesita ampliar esta lógica con algunas comprobaciones. El problema es distinguir entre un deseado <br> y uno no deseado.

    – vsync

    23 de julio de 2020 a las 10:42


  • No es “inútil” si funciona. La palabra que querías decir era “innecesario”. Gracias por el consejo.

    –Scott Martín

    23 de julio de 2020 a las 14:15

  • Sí, “innecesario” lo siento, en mi idioma significa idéntico 🙂 es posible que tengas mil nodos secundarios y no hay necesidad de iterarlos todos

    – vsync

    23 de julio de 2020 a las 14:18

  • Sí, mucho mejor seguro, recuerdo que no estaba muy contento con ese código cuando lo escribí, pero no conocía una forma compacta. Difundir childNodes en lugar de iterar es un movimiento inteligente que no se me ocurrió. Salud.

    –Scott Martín

    23 de julio de 2020 a las 16:29


avatar de usuario
Aireado

Puedes quitar extra BR etiqueta al final por esto

let lastTag = document.querySelector('#yourDiv').lastElementChild;
if(lastTag && lastTag.tagName == "BR") lastTag.remove();

avatar de usuario
scott messinger

yo suelo preventDefault cuando el usuario realiza un retorno de carro. Tal vez podría modificarlo para devolver un espacio normal cuando el usuario usa la tecla de espacio.

if(e.keyCode==13 && e.shiftKey){ //enter && shift
    e.preventDefault(); //Prevent default browser behavior
    //this.html(this.html+"<br>");
}
if(e.keyCode==13){ //enter
    e.preventDefault(); //Prevent default browser behavior
}

  • Probé este método pero Chrome me da este error: Uncaught ReferenceError: e is not defined. ¿Sabes por qué?

    – Tri Nguyen

    1 de febrero de 2013 a las 2:32

  • No puede evitar que Firefox agregue el
    con e.preventDefault()

    – Réjome

    7 dic 2014 a las 20:48

  • downvoted porque esto no responde a la pregunta. La pregunta era específica para Firefox agregando un <br _moz_dirty="" /> al presionar espacio no entrar/regresar.

    – MushinNoShin

    10 de enero de 2016 a las 16:58

  • @MushinNoShin Intenta leer mi respuesta nuevamente. Menciono cómo se podría modificar el ejemplo para que se ajuste al caso de uso mencionado en la pregunta.

    – Scott Messinger

    29 de junio de 2016 a las 23:42

  • @ScottMessinger Punto justo, mi culpa por leer el texto anterior demasiado rápido. Esta sugerencia aún no funcionaría al pegar caracteres de espacio.

    – MushinNoShin

    30 de junio de 2016 a las 21:01

Puedes hacer esto con CSS de una manera muy simple.

HTML

<span id="amt" contenteditable="true">100000</span>

CSS

span#amt br {
    display: none;
}

¿Ha sido útil esta solución?