Skip to content Skip to sidebar Skip to footer

How To Deactive Enter Event (only Enter No Shift+enter) In Contenteditable

I want to use contenteditable attribute in my code but I have one problem. I want when click (shift + enter) go on next line (point: I want only shift + enter go to next line) and

Solution 1:

You can use the keydown event for this. Mdn has more information about this event.

With the following example html:

<div id="pinky" contenteditable="true">Pink unicorns are blue</div>

You can attach an keydown event handler to this element. We can then use the event.shiftKey to detect if the shiftKey is pressed together with our enter key. Key 13 is either of the "enter" keys.

$('#pinky').on('keydown', function(e) {
  if (e.which === 13 && e.shiftKey === false) {
    //Prevent insertion of a return//You could do other things here, for example//focus on the next fieldreturnfalse;
  }
});

This snippets shows this in action:

$('#pinky').on('keydown', function(e) {
  if (e.which === 13 && e.shiftKey === false) {
    //Prevent insertion of a return//You could do other things here, for example//focus on the next fieldreturnfalse;
  }
});
#pinky {
  background: pink;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divid="pinky"contenteditable="true">Pink unicorns are blue</div>

Post a Comment for "How To Deactive Enter Event (only Enter No Shift+enter) In Contenteditable"