Open In App

How to detect “shift+enter” and generate a new line in Textarea?

Improve
Improve
Like Article
Like
Save
Share
Report

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;">GeeksforGeeks</h1>
        <script>
            function geeks(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="geeks(event)">
GeeksforGeeks A Computer science portal for geeks.
        </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">GeeksforGeeks</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:



Last Updated : 31 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads