how to deactive enter event (only enter no shift+enter) in contenteditable

html, jquery

Solution

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 field
    return false;
  }
});

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 field
    return false;
  }
});

#pinky {
  background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="pinky" contenteditable="true">Pink unicorns are blue</div>

Problem

Original source