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>
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.
Read more about JQuery Multiselect Dropdown with custom icon
What is the code for the enter key?
if (event.keyCode === 13) { //programmm}
In jQuery, how can I trigger the click event on the href element?
<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?
How do I detect keyboard events in JavaScript Code?
$(“#input_id”).keypress(function(event) {
if (event.keyCode === 13) {
// further function
});
