How to deactivate an input event (enter without shift + input) in contenteditable

Question

I want to use the contenteditable attribute in my code, but I have one problem.

I want to click ( shift + enter ) to go to the next line ( : I only want to shift + enter to go to the next line ) and when I press the enter button the hidden text in this div that has the contenteditable attribute.

please tell me about it.

Answer 1

You can use the keydown event for this. Mdn contains additional information about this event.

In the following html example:

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

You can attach a keydown event handler to this element. Then we can use event.shiftKey to determine if shiftKey is pressed along with our input key. Key 13 is either the enter key.

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

---

These fragments show 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>