Using the keyCode property of the KeyboardEvent helps to track the keypress on the keyboard. It will catch and enter the key and trigger button.
Trigger Button Click on Enter Key Press using JavaScript
HTML example code.
Get the element of the input field. Execute the keyup function with addEventListener when the user releases a key. If keyCode is 13, trigger button element with click() event and popup alert box.
<!DOCTYPE html>
<html>
<body>
<form>
<input id="myInput" placeholder="Some text.." value="">
<input type="submit" id="myBtn" value="Submit" onclick="hello()">
</form>
<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
function hello() {
alert("Hello");
}
</script>
</body>
</html>Output:
Q: How to trigger an enter keypress event after a certain action is executed?
Answer:
- Create a variable that tells us if the user has clicked your button. var clicked = false;
- Add an event listener to your button, the user clicks on it, the clicked variable will become true. myButton.addEventListener(‘click’, function(){ clicked = true; });
- Add a keypress event listener: document.addEventListener(‘keypress’, function(e) { // `e` is the event });
- check if the user clicked previously if(clicked) { // … }
- If pressed key is keycode is 13. var keynum = e.keyCode||e.which; if(keynum == 13) { // … }
- If the pressed key was enter, use clicked = false;
- After it will call the function
fafter 2 seconds.setTimeout(f, 2000);
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click me, and then press enter.</button>
<script>
var clicked = false;
document.querySelector('#btn').addEventListener('click', function(){
clicked = true;
console.log("You clicked the button. `clicked` is now `true`");
});
document.addEventListener('keypress', function(e) {
if(clicked) {
var keynum = e.keyCode || e.which;
if(keynum == 13) {
clicked = false;
console.log("`clicked` is now `false`. Waiting 2 seconds...");
setTimeout(f, 2000);
}
}
});
function f() {
console.log("Function `f` executed successfully!");
}
</script>
</body>
</html>Source: stackoverflow.com
Output:
JavaScript enter event listener code
document.querySelector('#txtSearch').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
// code for enter
}
});Do comment if you have any doubts or suggestions on this JS Enter key code.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version