How to check whether the enter key is pressed in a textbox or not using JavaScript / jQuery ? - GeeksforGeeks

30 May, 2019
Given a textarea element and the task is to check the user presses enter key with the help of JQuery.
jQuery keyup() Method: This method triggers the keyup event or adds a function to run when a keyup event occurs. The keyup event occurs when a keyboard key is released.Syntax:Trigger the keyup event for the selected elements:$(selector).keyup()
Attach a function to the keyup event:$(selector).keyup(function)
Parameters: It contains single parameter event which is optional. It specifies the function to run when the keyup event is triggered.
Syntax:
Trigger the keyup event for the selected elements:$(selector).keyup()

$(selector).keyup()

Attach a function to the keyup event:$(selector).keyup(function)

$(selector).keyup(function)

Parameters: It contains single parameter event which is optional. It specifies the function to run when the keyup event is triggered.
jQuery trigger() Method: This method triggers the defined event and the default behavior of an event for the selected elements.Syntax:$(selector).trigger(event, eventObj, param1, param2, ...)
Parameters:event: This parameter is required. It specifies the event to trigger for the specified element. Event can be a custom or any of the standard.param1, param2, ...: This parameter is optional. It specifies the extra parameters to pass on to the event handler. Additional parameters are especially useful in case of custom events.
Syntax:
$(selector).trigger(event, eventObj, param1, param2, ...)

Parameters:
event: This parameter is required. It specifies the event to trigger for the specified element. Event can be a custom or any of the standard.
param1, param2, ...: This parameter is optional. It specifies the extra parameters to pass on to the event handler. Additional parameters are especially useful in case of custom events.
jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.Syntax:$(selector).on(event, childSelector, data, function, map)
Parameters:event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.data: This parameter is optional. It specifies additional data to pass to the function.function: This parameter is required. It specifies the function to run when the event occurs.map: It specifies an event map ({event:func(), event:func(), ...}) having one or more event to add to the selected elements, and functions to run when the events happens.
Syntax:
$(selector).on(event, childSelector, data, function, map)

Parameters:
event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.
childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
data: This parameter is optional. It specifies additional data to pass to the function.
function: This parameter is required. It specifies the function to run when the event occurs.
map: It specifies an event map ({event:func(), event:func(), ...}) having one or more event to add to the selected elements, and functions to run when the events happens.
Example 1: In this example, the keyup event is added to the textarea, when it occurs then a new event enterKey is triggered by keyup event.
<!DOCTYPE HTML> <html>     <head>         <title>             Event for user pressing enter            button in a textbox        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>       <body style = "text-align:center;">                   <h1 id = "h" style = "color:green;" >             GeeksForGeeks         </h1>                  <p id = "GFG_UP" style =             "font-size: 15px; font-weight: bold;">            click the Enter Key inside the textarea.        </p>                  <textarea></textarea>        <br>                       <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            $('textarea').keyup(function(e) {                if(e.keyCode == 13) {                    $(this).trigger("enterKey");                }            });                     $('textarea').on("enterKey", function(e){                $("#GFG_DOWN").text("Enter key pressed inside textarea");            });                                     </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: In this example, the keyup event is added to the textarea, when it occurs then a message-Enter key pressed inside textarea is printed on the screen without triggering a new event to handle it.
<!DOCTYPE HTML> <html>     <head>         <title>             Check enter key pressed in a            textbox using JavaScript        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>       <body style = "text-align:center;">                   <h1 id = "h" style = "color:green;" >             GeeksForGeeks         </h1>                  <p id = "GFG_UP" style =            "font-size: 15px; font-weight: bold;">            click the Enter Key inside the textarea.        </p>                  <textarea></textarea>        <br>                       <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            $('textarea').keyup(function(e) {                if(e.keyCode == 13) {                    $("#GFG_DOWN").text("Enter key pressed inside textarea");                }            });                             </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?