Easily by using javascript trigger enter key

Normally people are using the button to submit a form or to hit any function. But as you know some people don’t want to engage with mouse when they are doing some fast typing work. Also, some methods are required to hit an enter button. So that type of people easily can do this by using jquery or javascript to trigger enter key. Our goal is to help you with detailed and fully-functional source code. There are the following functions required by which you can do.

keyup():

This method fires automatic functions or some operation when a keyboard key is let out.

keydown():

This method fires automatic functions or some operation when a keyboard key is pushed.

keyCode Property:

The keyCode attribute of the KeyboardEvent helps us to identify the keyup and keydown on the keyboard.

By using each above function you can do the javascript trigger enter key. Below you can see multiples example of javascript trigger enter keys with different methods.

addEventListener():

This function only takes the event to listen for. The second argument is to be called only if the described events are fired otherwise it will not work. In a single element, we can add multiple event handlers. This can be done without any overwriting the existing event handler. It must be noted that we can add numerous event handlers without a single error.

Example No 1 using javascript and keyup() :

First, create a form as below given

<!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>
<style type="text/css">
 .input{
    width: 30%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: 1px solid #555;
      outline: none;
      text-align: center;
 }   
 .input:focus {
  border: 3px solid #555;
}
.button{
     width: 30%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: 1px solid #555;
      outline: none;
       text-align: center;
}
form{
    display: grid;
    padding-left: 40%;
}
h1{
    text-align: center;
    padding-top: 10%;
}

</style>
<body>
     <h1>Type in text feild and press enter  </h1>
<form>
    <input class="input" id="input_id" placeholder="Type Here" value="">
   <!--  Dont give type to below input otherwise it will refresh your page -->
    <input class="input" id="btn" value="Submit">
</form>
<!-- In next step we will write here javascript code -->
</body>
</html>

Now we will write javascript code for trigger enter key

//Put this code before closing body tag
<script>
//get input value
var input = document.getElementById("input_id");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("btn").click();
    }
});
  $("#btn").click(function() {
    var input_value = document.getElementById('input_id').value;
    alert('Entered value='+input_value+' And Button clicked ');
  
    });
</script>

On pressing enter output will be like above image.

Example No 2 using javascript and keydown() :

In this example all codes are the same just you can replace keyup with keydown function.

<script>
var input = document.getElementById("input_id");
// Replace Keyup with keydown
input.addEventListener("keydown", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("btn").click();
    }
});
  $("#btn").click(function() {
    var input_value = document.getElementById('input_id').value;
    alert('Entered value='+input_value+' And Button clicked ');
  
    });
</script>

Example No 3 using javascript and keypress() :

In this example, we are using keypress instead of keydown. Because keypress() working is the same as keydown()

function works. This example is shorter and easier than above.

<script> 
        $("#input_id").keypress(function(event) {
            if (event.keyCode === 13) {
                $("#btn").click();
            }
        });
   
        $("#btn").click(function() {
            alert("Button clicked");
        });
    </script> 
</body>

You can easily use the above examples for your solution to javascript trigger enter key.

Important Tip:

Try as you can do never loads the script file or add a script url in head tag. Best practice is to add script in footer. It helps you to load your page faster.

Read How to convert PHP Array to JavaScript Array Below you can also read people frequently ask questions related to javascript trigger enter key.

What is the code for the enter key?

13 is the code for the enter key. You can detect by this code
if (event.keyCode === 13) { //programmm}

In jQuery, how can I trigger the click event on the href element?

In HTMl use below code.
<a id=”myBtn” onclick=”javascript:alert(‘Hello World!’) > Button</a>

In javascript use below code.
scritp tag start
var input = document.getElementById(“myInput”);
input.addEventListener(“keyup”, function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById(“myBtn”).click();
}
});
script tag end

How can we submit an HTML form without a submit button?

You can submit an HTML form without a submit button with a few lines of code. See our provided image for code.

How do I detect keyboard events in JavaScript Code?

You have to check to enter a key value which is 13. You can easily check by this code.
$(“#input_id”).keypress(function(event) {
if (event.keyCode === 13) {
// further function
});