JavaScript Submit textbox on pressing ENTER?

JavascriptWeb DevelopmentObject 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 −

raja
Published on 09-Sep-2020 13:59:29
Advertisements