CODEWITHSUNDEEP
javascriptjquerycontenteditable
Jordan
Jordan

Reputation: 263

Contenteditable adds a <br> when I hit space

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.

Upvotes: 23

Views: 7359

Answers (4)

Abdul Jabbar
Abdul Jabbar

Reputation: 5941

You can remove extra BR tag at end by this

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

Upvotes: 3

Hassan Khan
Hassan Khan

Reputation: 126

You can do this with CSS in very simple way

HTML

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

CSS

span#amt br {
    display: none;
}

Upvotes: 0

Scott Martin
Scott Martin

Reputation: 1367

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

Upvotes: 3

Scott Messinger
Scott Messinger

Reputation: 159

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
}

Upvotes: 0

Related Questions