Skip to content
Related Articles

Related Articles

JavaScript | Trigger a button on ENTER key
  • Last Updated : 22 Apr, 2019

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=
          </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=
          </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 arrow_drop_up
Recommended Articles
Page :