Prevent line/paragraph breaks in contentEditable

Question

When using contentEditable in Firefox, is there a way to prevent the user from inserting paragraph or line breaks by pressing enter or shift+enter?

Answer 1

I came here searching for the same answer, and was surprised to find it's a rather simple solution, using the tried and true Event.preventDefault()

const input = document.getElementById('input');

input.addEventListener('keypress', (e) => {
  if (e.which === 13) e.preventDefault();
});

<div contenteditable="true" id="input">
  You can edit me, just click on me and start typing.
  However, you can't add any line breaks by pressing enter.
</div>

Answer 2

Add the following CSS rule to hide line breaks. This is only a style setting, you should add some event handlers to prevent inserting line breaks:

.your_editable br {
    display: none
}

Answer 3

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

Solution proposed by Kamens doesn't work in Opera, you should attach event to document instead.

/**
 * Pass false to enable
 */
var disableEnterKey = function(){
    var disabled = false;

    // Keypress event doesn't get fired when assigned to element in Opera
    $(document).keypress(function(e){
        if (disabled) return e.which != 13;
    });                 

    return function(flag){
        disabled = (flag !== undefined) ? flag : true;
    }
}();    

Answer 4

Use CSS:

word-break: break-all;

For me, its worked!

Answer 5

This is possible with Vanilla JS, with the same effort:

document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
    if (evt.which === 13) {
        evt.preventDefault();
    }
});

You should not use jQuery for the most simple things. Also, you may want to use "key" instead of "which": https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Update, since keypress is deprecated:

document.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
    if (evt.keyCode === 13) {
        evt.preventDefault();
    }
});

Answer 6

another option is to allow breaks to be entered but remove them on blur. this has the advantage of dealing with pasted content. your users will either love it or hate it (depending on your users).

function handle_blur(evt){
  var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}

then, in html:

<span onblur="handle_blur(event)" contenteditable>editable text</span>