Javascript onkeydown/up

Question

I would like to know how I use onkeydown and onkeyup event in javscript correctly with an event listener. I want the event to listen when you just press in the website, not in a text field.

I don't know exactly how the script would look like but hopefully you understand what I want to do. I figured the code would look something like this:

document.addEventListener('keydown', 'keyup', function(event) {
if(event.keyCode == 65){
    gas1();
}});

Sorry for being so unclear, trying my best to explain

Possible duplicate of [jQuery: trigger keypress function on entire document but not inside inputs and textareas?](http://stackoverflow.com/questions/11807944/jquery-trigger-keypress-function-on-entire-document-but-not-inside-inputs-and-t) — Roope, Sep 15 '16 at 13:49
for keydown event: http://www.w3schools.com/jsref/event_onkeydown.asp — Tân, Sep 15 '16 at 13:51
for keyup event: http://www.w3schools.com/jsref/event_onkeyup.asp — Tân, Sep 15 '16 at 13:51

score 5 · Answer 1 · answered Sep 15 '16 at 13:50

Look an example I prepared in jsfiddle:

document.addEventListener('keydown', function(event) {
    console.log(event.key);
});

Simply add a listener to the whole document and check for the "key" in the event object you receive in the callback

keydown event test

score 1 · Answer 2 · answered Sep 15 '16 at 13:52

Try Implementing this

document.onkeydown = function(event) {
    if(event.keyCode == 65){
        gas1();
    }
}
document.onkeyup = function(event) {
    if(event.keyCode == 65){
        gas1();
    }
}

But if you want to call a function gas1() only once on keypress just use keydown only.

score 1 · Answer 3 · answered Sep 15 '16 at 13:53

You can't aggregate two events on a single document.addEventListener. The first parameter is the name of the event, and the second a listener function called when it's fired.

Create two handlers, one for keyup and one for keydown, or use just keypress instead for this.

Reference: http://www.w3schools.com/jsref/met_document_addeventlistener.asp

Abhijeet · Answer 4 · 2016-09-15T15:31:58.443

You can use below code for checking KeyUp and KeyDown press on HTML page.

Note :Arrow keys are only triggered by onkeydown.

$(document).ready(function() {
    document.onkeydown = function(event) {
    if(event.keyCode=="38")
     console.log("Up key pressed");
    else if(event.keyCode=="40")
        console.log("Down key pressed");
   };  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Above code is tested on system working fine.

Note :Try testing while your focus should be in Result area to print output on console.

score 0 · Answer 5 · answered Sep 15 '16 at 14:38

function defw(){
     for(var i =0; i < 10; i+= 1) {
      var div = document.createElement('div');
      document.getElementsByTagName('section')[0].appendChild(div);
      }
 }

document.addEventListener('keydown', function(event) {
    var ekey = event.keyCode
    if( 69 === ekey ) {
       defw();
    }
});

This example is to make 10 DIVS calling the function defw()
1. SAVE the event.keyCode in a variable
2. THe value 69 is the keyboard letter e in your KEYBOARD

HERE IS THE LINK codepen.io

Javascript onkeydown/up

5 Answers5