onkeyup and onkeydown not catching anything

javascript css html canvas

26,258

You should be doing something like this:

document.onkeydown = function(event) {
    ...
}
document.onkeyup = function(event) {
    ...
}

And get rid of:

onkeyup="onKeyUp();" onkeydown="onKeydown();"

The quick test page I made which works:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
document.onkeydown = function(event) {
 event = event || window.event;

 var e = event.keyCode;

 //if (e==87 /*w*/){
  up = true;
  throw('up'); 
 //}

 if (e==65 /*a*/){
  left = true;
 }

 if (e==83 /*s*/){
  down = true;
 }

 if (e==68 /*d*/){
  right = true;
 }
}

document.onkeyup=function(event) {
 event = event || window.event;

 var e = event.keyCode;

 //if (e==87 /*w*/){
  up = false;
  throw('up'); 
 //}

 if (e==65 /*a*/){
  left = false;
 }

 if (e==83 /*s*/){
  down = false;
 }

 if (e==68 /*d*/){
  right = false;
 }
}
</script>
</head>

<body>
    <input id="ss" type="button" value="start/stop" />
    <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
        <canvas id="canvas" width="480" height="320">
            Canvas not displaying.
        </canvas>
    </div>
</body>

</html>

26,258

Author by

CyanPrime

Updated on January 23, 2020

Comments

CyanPrime over 4 years

Can someone tell me whats going on? My console isn't throwing any exceptions.

    function onKeyDown(){
                    var e = event.keyCode;

                    //if (e==87 /*w*/){
                        up = true;
                        throw('up'); 
                    //}

                    if (e==65 /*a*/){
                        left = true;
                    }

                    if (e==83 /*s*/){
                        down = true;
                    }

                    if (e==68 /*d*/){
                        right = true;
                    }
                }

                function onKeyUp(){
                    var e = event.keyCode;

                    //if (e==87 /*w*/){
                        up = false;
                        throw('up'); 
                    //}

                    if (e==65 /*a*/){
                        left = false;
                    }

                    if (e==83 /*s*/){
                        down = false;
                    }

                    if (e==68 /*d*/){
                        right = false;
                    }
                }

Okay, so that was the javascript, and this is the html:

    <body>
            <input id="ss" type="button" value="start/stop" />
            <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
                <canvas id="canvas" width="480" height="320"  onkeyup="onKeyUp();" onkeydown="onKeydown();">
                    Canvas not displaying.
                </canvas>
            </div>
        </body>



Edit: current code:

window.onload = function(){ init(); };

function init(){
                initSettings();
                initImages();

                document.getElementById('canvas').onkeydown = function(event) {
                    var e = event.keyCode;

                    //if (e==87 /*w*/){
                        up = true;
                        throw('up'); 
                    //}

                    if (e==65 /*a*/){
                        left = true;
                    }

                    if (e==83 /*s*/){
                        down = true;
                    }

                    if (e==68 /*d*/){
                        right = true;
                    }
                }

Ken Franqueiro over 13 years

or in his case document.getElementById("canvas").onkeydown = ..., etc., I presume? Also, don't forget to do event = event || window.event; first thing in each of those handlers (so that IE doesn't crap out. Incidentally, I'm pretty sure his original code will crap out in everything else.)
thirtydot over 13 years

Maybe I was just doing it wrong, but I couldn't get the events to fire if I attached them to the canvas element.
Ken Franqueiro over 13 years

Ah. That might be part of his problem as well then :) Admittedly I haven't used canvas yet.
thirtydot over 13 years

Did you also try @Ken Franqueiro's tip about window.event and IE? What browser are you testing with?
CyanPrime over 13 years

I'm using firefox right now, and yeah, I did but I think it's JQuery
thirtydot over 13 years

I edited my answer with my working test page. You should have said (or tagged) that you have jQuery available - it makes it so much easier.
Ken Franqueiro over 13 years

If I read his comment above correctly, he's not using jQuery, he's just mistaking half the code we suggest to him as being jQuery when it's also not jQuery...
CyanPrime over 13 years

No, no. I DON'T use JQuery. This worked though, so I've accepted it. thank you very much!
thirtydot over 13 years

@Ken Franqueiro: Oh, I see. Thanks for your help with this question.