How to run javascript on keypress without an input field?

Question

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?

score 9 · Accepted Answer · edited Nov 01 '18 at 01:44

9

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!");
    }
});

edited Nov 01 '18 at 01:44

Community

1
1

answered Nov 01 '18 at 01:15

Jack Bashford

43,180
11
50
79

In script tags? Directly in the HTML body? Does this detect the keypress as being the enter key? – bjarkemoensted Nov 01 '18 at 01:16
You'd put it in a ` – Jack Bashford Nov 01 '18 at 01:17
@ahura Yes, that's how you'd go about it for other keycodes – Jack Bashford Nov 01 '18 at 01:34
Yes, I did just now. Followup question, if I want to listen for several different keys, should I write several such event listeners? I tried to just check for various keys being pressed in the same, but only enter works: https://pastebin.com/XexjEpb2 – bjarkemoensted Nov 01 '18 at 01:36
@ahura That can be found in [this post](https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript). It's relatively simple if you understand the concept – Jack Bashford Nov 01 '18 at 01:37
1

You may wish to use `keypress` or `keyup` events instead. – jchook Nov 01 '18 at 02:06
Hmm I tried looking at it, but it's not clear to me how to combine with your answer. I tried the following but this activates the alert for any keypress: https://pastebin.com/R0t4Vd6H – bjarkemoensted Nov 01 '18 at 02:10

b1k · Answer 2 · 2018-11-01T01:48:35.490

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>

The code that detects `A` only works if you press `shift` + `a`. — Jack Bashford, Nov 01 '18 at 01:39
@JackBashford, check out the updated solution. It is because shift+a is capital A and keyCode is different for capital A and small a. — b1k, Nov 01 '18 at 01:43
@JackBashford, No problem. I've edited the second block of code so that it makes more sense about KeyCode. — b1k, Nov 01 '18 at 01:49

How to run javascript on keypress without an input field?

2 Answers2