I'm not sure why, but if you have an element with contenteditable enabled, the first time you enter a space, it'll append a <br> tag into the element. If the element has a space in it by default (<p contenteditable="true">this is a test</p>), it'll be fine, but as soon as the user hits that spacebar (or even copy+pastes a space character), Firefox adds a <br _moz_dirty="" /> to the <p>.

Does anyone have any idea why or a simple fix? This is my first time playing with contenteditable, so a lot of this is new to me. At the moment, I'm just using $('br').remove() which seems to be working, but I'd love an explanation and a proper way to prevent it if anyone knows.

I'm not sure why, but if you have an element with contenteditable enabled, the first time you enter a space, it'll append a <br> tag into the element. If the element has a space in it by default (<p contenteditable="true">this is a test</p>), it'll be fine, but as soon as the user hits that spacebar (or even copy+pastes a space character), Firefox adds a <br _moz_dirty="" /> to the <p>.

Does anyone have any idea why or a simple fix? This is my first time playing with contenteditable, so a lot of this is new to me. At the moment, I'm just using $('br').remove() which seems to be working, but I'd love an explanation and a proper way to prevent it if anyone knows.

• javascript
• jquery
• contenteditable

• Is this still reproducible? I have never encountered such a bug in FF – YakovL Commented Jul 30, 2016 at 14:34
• I got the same problem, jsbin./xarirotali/edit?html,css,output Press two spaces in the end of 'some text' and inspect the p element in FF and it will add a <br>. – Jonathan Andersson Commented Nov 1, 2016 at 13:36
• 1 One way to solve this issue by hiding breaks in contenteditables with CSS: p[contenteditable="true"] br {display:none;} However this will also prevent carriage return from moving to a new line. – jla Commented Oct 20, 2018 at 8:11
• @jla that solved my problem, thank you. – Angry Red Panda Commented Nov 17, 2018 at 14:05

4 Answers 4

I encountered this today and also don't know why Firefox does it. I've dealt with it like this.

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)
            }
        } 
    })
}

You can remove extra BR tag at end by this

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

I use preventDefault when the user makes a carriage return. Maybe you could modify it to return a normal space when the user uses the space key.

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
}

You can do this with CSS in very simple way

HTML

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

CSS

span#amt br {
    display: none;
}