jQuery Detect ENTER key Press

To detect pressing Enter on keyboard using jQuery; In this tutorial, you will learn how to detect pressing Enter on keyboard using jQuery keypress() event method.

How to detect pressing Enter on keyboard using jQuery

To determine whether the user has pressed the “Enter” key on web app pages to submit a form, detect the event on textboxes, input boxes, and clicks using the jQuery keypress() event. Here are examples of using the jQuery keypress() event:

jQuery keypress() Event Method
Syntax of jQuery keypress() Event Method
Parameters of jQuery keypress() Event Method
Examples of jQuery Detect ENTER key Press

jQuery keypress() Event Method

The jQuery keypress() event occurs uniquely when a keyboard button is pressed. This keypress event bears resemblance to the keydown event. When the keypress() event occurs, associated functions are executed through the keypress() method.

Syntax of jQuery keypress() Event Method

$(selector).keypress()

This triggers the keypress event for the selected elements.

$(selector).keypress(function)

Parameters of jQuery keypress() Event Method

Parameter	Description
Function	It is an optional parameter. It is executed itself when the keypress event is triggered.

Examples of jQuery Detect ENTER key Press

Let’s see an example1 with demonstrate jQuery keypress(); as shown below:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
    $("input").keypress(function(){
        $("span").text (i += 1);
    });
});
</script>
</head>
<body>
Enter something: <input type="text">
<p>Keypresses val count: <span>0</span></p>
</body>
</html>

Enter something:

Keypresses val count: 0

Let’s see an example 2 with demonstrate jQuery keypress(); as shown below:

To check whether the user has pressed the ENTER key on the webpage or on an input element, you can tie a keyup or keydown event to that element or document object.

If the code of the key pressed code is 13 then the “ENTER” key was pressed; Otherwise some other key was pressed.

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>Write something here & press enter</h1>
    <label>TextBox Area: </label>
    <input id="someTextBox" type="text" size="100" />
    <script type="text/javascript">
        //Bind keypress event to textbox
        $('#someTextBox').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert('You pressed a "enter" key in textbox');
            }
            event.stopPropagation();
        });
    </script>
</body>
</html>

Write something here & press enter

TextBox Area:

Subscribe to Blog via Email