Menu
I'm writing a simple web site and would like to run some simple javascript when the user presses a button on their keyboard. Something as simple as running alert("Hello!"); or showing a modal box when the user presses enter would do.
After searching for a good while, I've only been able to find solutions that work if the page contains an input text field. Is it possible without it?
720
To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery. keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.
There are three different keyboard events in JavaScript: keydown : Keydown happens when the key is pressed down, and auto repeats if the key is pressed down for long. keypress : This event is fired when an alphabetic, numeric, or punctuation key is pressed down. keyup : Keyup happens when the key is released.
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
Given an HTML document containing text area and the task is to trigger the button when the user hit Enter button. We can do it by using “keyup”, “keydown”, or “keypress” event listener on textbox depending on the need.
Yes, it is possible to do so, and here's how you'd do it:
document.body.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
alert("Hello! You pressed the enter key!");
}
});
Yes, you can actually use eventListener for this. For example, check out this sample page.
<html>
<body>
<script>
document.addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
alert('You just hit enter.');
}else if(event.keyCode ==65){
alert('You just press A.');
}else if(event.keyCode==97){
alert('You just hit a.');
}else{
alert('You press something other than A, a and ENTER key');
}
})
</script>
</body>
</html>In order to get the keycode for the various keypress you can use this:
<html>
<body>
<p>Press a key on the keyboard in the input field to get the KeyCode for that key.</p>
<input type="text" size="40" onkeypress="getKeyCode(event)">
<p id="keyCode"></p>
<script>
function getKeyCode(event) {
var x = event.which || event.keyCode;
document.getElementById("keyCode").innerHTML = "The keyCode is: " + x;
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
