How to detect “shift+enter” and generate a new line in Textarea?
The text area tag defines a multi-line text input control. The size of a text area can be specified by the cols and rows attributes. By default, whenever we press “enter” or “shift+enter” it creates a new line in the text area. So, to only detect “shift+enter” and generate a new line from it we need to block “enter” from generating a new line and to redirect it to do something else like submitting.
Example 1: Check out the following Example for “enter” and “shift+enter” mechanism. So, here in the below code both “enter” and “shift+enter” do the same. So, all that has to be done is to either block the “enter” mechanism or redirecting it to do something else.
<!DOCTYPE html> <html> <body> <center> <h1 style= "color:green;" >w3wiki</h1> <script> function Beginner(event) { // 13 is the keycode for "enter" if (event.keyCode == 13 && event.shiftKey) { document.getElementById( "d" ).innerHTML = "Triggered enter+shift" ; } if (event.keyCode == 13 && !event.shiftKey) { document.getElementById( "d" ).innerHTML = "Triggered enter" ; } } </script> <h4>Press "enter" or "shift+enter" in the textarea, both does the same.</h4> <textarea rows= "8" cols= "50" onkeypress= "Beginner(event)" > w3wiki A Computer science portal for Beginner. </textarea> <p id= "d" style= "color:red" ></p> </center> </body> </html> |
Output:
Example 2: In the below code, we created a function(submitForm()) to submit the form which just contains a line, because placing this document.geek.submit() under event.preventDefault(), document.geek.submit() will overrides the event.preventDefault() and never blocks the “enter” from creating a line.
<!DOCTYPE html> <html> <head> <script> function press(event) { if (event.keyCode == 13 && !event.shiftKey) { //Stops enter from creating a new line event.preventDefault(); submitForm(); return true ; } function submitForm() { document.geek.submit(); //submits the form. } } </script> </head> <body> <center> <h1 style= "color:green" >w3wiki</h1> <h4> Press "enter" to submit and "shift+enter" to generate a new line. </h4> <form action= "submit.html" name= "geek" > <textarea rows= "7" cols= "30" onkeypress= "press(event)" ></textarea> </form> </center> </body> </html> |
HTML in submit.html:
<!DOCTYPE html> < html > < body > < h2 style = "color:red" >List Submitted.</ h2 > </ body > </ html > |
Output: