JavaScript Submit textbox on pressing ENTER?

Javascript Web Development Object Oriented Programming

The ENTER has the key code 13. We will use the event.keycode to check whether ENTER is pressed or not. Following is the code −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input type="text" id="name"/>
<script>
   document.getElementById("name").addEventListener("keydown",
   function(event) {
      if (!event) {
         var event = window.event;
      }
         event.preventDefault();
      if (event.keyCode == 13){
         login();
      }
   }, false);
   function login(){
      console.log("submitted successfully....");
   }
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

When you press ENTER key, the following message would be visible on console as in the below screenshot −

AmitDiwan

Updated on: 09-Sep-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started