Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

JavaScript | Trigger a button on ENTER key

  • Last Updated : 27 Jul, 2021

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.

    Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

    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:

      JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.




      My Personal Notes arrow_drop_up
Recommended Articles
Page :