Prevent line/paragraph breaks in contentEditable

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

You can attach an event handler to the keydown or keypress event for the contentEditable field and cancel the event if the keycode identifies itself as enter (or shift+enter).

This will disable enter/shift+enter completely when focus is in the contentEditable field.

If using jQuery, something like:

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

...which will return false and cancel the keypress event on enter.


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
}