JavaScript | Trigger a button on ENTER key

To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery.

keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.

Syntax:
- It triggers the keyup event for selected element.
```
$(selector).keyup()
```
- It Attaches a function to the keyup event.
```
$(selector).keyup(function)
```
keydown(): This event occurs when a keyboard key is pressed. The method either triggers the keydown event, or to run a function when a keydown event occurs.
Syntax:
- It triggers the keydown event for selected element.
```
$(selector).keydown()
```
- It Attaches a function to the keydown event.
```
$(selector).keydown(function)
```
keypress(): This event is similar to keydown event. This event occurs when a keyboard key is released. The method either triggers the keypress event or to run a function when a keypress event occurs.
Note: This event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC).
Syntax:
- It triggers the keypress event for selected element.
```
$(selector).keypress()
```
- It Attaches a function to the keypress event.
```
$(selector).keypress(function)
```

Example 1: This Example uses keypress() event to trigger enter key as a button.

<!DOCTYPE html>   
<html>   
  
<head>  
    <title>  
        JavaScript | Trigger a button on ENTER key  
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
    </script> 
</head>  
         
<body style = "text-align:center;">   
     
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1>   
   
    Username: <input id="uname" type="text"><br> 
    Password: <input id="pass" type="password"><br> 
    <button id="GFG_Button">Submit</button>  
             
    <script>  
        $("#pass").keypress(function(event) { 
            if (event.keyCode === 13) { 
                $("#GFG_Button").click(); 
            } 
        }); 
   
        $("#GFG_Button").click(function() { 
            alert("Button clicked"); 
        }); 
    </script>  
</body>   
  
</html>  

Output:

Before pressing on the button:
After pressing on the button:

Example 2: This example uses keyup() event to trigger enter key as a button.

<!DOCTYPE html>   
<html>   
  
<head>  
    <title>  
        JavaScript | Trigger a button on ENTER key  
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
    </script> 
</head>  
         
<body style = "text-align:center;">   
     
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1>   
   
    Username: <input id="uname" type="text"><br> 
    Password: <input id="pass" type="password"><br> 
    <button id="GFG_Button">Submit</button>  
             
    <script>  
        $("#pass").keyup(function(event) { 
            if (event.keyCode === 13) { 
                $("#GFG_Button").click(); 
            } 
        }); 
   
        $("#GFG_Button").click(function() { 
            alert("Button clicked"); 
        }); 
    </script>  
</body>   
  
</html>   

Output:

Before releasing the button:
After releasing the button:

My Personal Notes

Recommended Posts: