How to prevent non-breaking spaces from being created in a contenteditable element?

Question

I have a contenteditable div, which creates many non-breaking spaces when words are deleted or added. This is the format of my code:

<div id="div" contenteditable="true">
    <span>Hello</span>
    <span></span>
</div>

I've tried replacing non-breaking spaces on input:

document.getElementById("div").oninput = function() {
     document.getElementById("div").innerHTML.replace(" ","");
}

But this doesn't work. Any ideas?

Answer 1

Another solution without any JavaScript at all: just add white-space: pre-wrap; or white-space: break-spaces; to the styles of your content editable element... and voilà, no more   :)