Menu
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?
933
To prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript, we can listen for the keydown event on the contenteditable element and prevent the default behavior when Enter is pressed. to add a contenteditable div. document. addEventListener("keydown", (event) => { if (event.
Changing your tabIndex to >= 0 will let you focus on the elements. If you need to do it dynamically, you can just add a tabindex >= 0 to your element in the event listener.
You can add the contenteditable="true" HTML attribute to the element (a <div> for example) that you want to be editable. If you're anticipating a user to only update a word or two within a paragraph, then you could make a <p> itself editable.
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? 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 is only a style setting, you should add some event handlers to prevent inserting line breaks: Chrome inserts some <DIV> s too, so might add .your_editable * { display: inline } before that. Other than adding line breaks, the browser adds additional tags and styles (when you paste text, the browser also appends your pasted text style).
Other than adding line breaks, the browser adds additional tags and styles (when you paste text, the browser also appends your pasted text style). The code below covers it all. When you press enter, no line breaks will be added. When you paste text, all elements added by the browser are stripped from the text.
When the line breaks, it adds a div element automatically to start the current new line. By using display: flex, you make the DIVs appear horizontally in the same line, unlike display: block which is applied by default. This does not prevent the addition of new lines.
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.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
