CODEWITHSUNDEEP
javascripthtmldom-events
Paul Ferris
Paul Ferris

Reputation: 346

Using onkeypress to detect up arrow being pressed (HTML and Javascript)

I've been trying to program a pingpong game without jQuery (challenge from Software Design teacher), and am planning on using onkeypress to move the paddles. However, I'm not sure how to attach a specific key to the function specified in the event handler.

It's not terribly relevant, but here's my code:

HTML:

<div id="Paddle1" class="paddle" onkeypress="PaddleMovement1(event)"></div>
<div id="Paddle2" class="paddle" onkeypress="PaddleMovement3(event)"></div>

JavaScript:

var PaddleMovement1 = function(){
    document.getElementById('Paddle1Up').style.animationPlayState="running";
    setTimeout(Paddle1Stop1, 25)
    var Paddle1Stop1 = function(){
        document.getElementById('Paddle1Up').style.animationPlayState="paused";
    };
};

var PaddleMovement2 = function(){
    document.getElementById('Paddle1Down').style.animationPlayState="running";
    setTimeout(Paddle1Stop2, 25)
    var Paddle1Stop2 = function(){
        document.getElementById('Paddle1Down').style.animationPlayState="paused";
    };
};

var PaddleMovement3 = function(){
    document.getElementById('Paddle2Up').style.animationPlayState="running";
    setTimeout(Paddle2Stop1, 25)
    var Paddle2Stop1 = function(){
        document.getElementById('Paddle2Up').style.animationPlayState="paused";
    };
};

var PaddleMovement4 = function(){
    document.getElementById('Paddle2Down').style.animationPlayState="running";
    setTimeout(Paddle2Stop2, 25)
    var Paddle2Stop2 = function(){
        document.getElementById('Paddle2Down').style.animationPlayState="paused";
    };
};

Finally, the complete thing can be found in this jsfiddle:

http://jsfiddle.net/2RfzF/2/

Upvotes: 0

Views: 1056

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075925

keypress is only fired for keypresses that result in typeable characters, not other keys. To detect other keys, use keydown and keyup. This should be fairly clear from the specification:

A user agent must dispatch this event when a key is pressed down, if and only if that key normally produces a character value.

This page is a handy guide to the madness that is keyboard events in JavaScript across browsers...

Separately, for your purposes I'd probably trap the events on document rather than on a specific element (keydown and keyup bubble, so that works).

For example:

(function() {
    if (document.addEventListener) {
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keydown", keyUpHandler, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onkeydown", function() {
            keyDownHandler(window.event);
        });
        document.attachEvent("onkeydown", function() {
            keyUpHandler(window.event);
        });
    }
    else {
        // If you want to support TRULY antiquated browsers
        document.onkeydown = function(event) {
            keyDownHandler(event || window.event);
        };
        document.onkeyup   = function(event) {
            keyUpHandler(event || window.event);
        };
    }

    function keyDownHandler(e) {
        var key = e.which || e.keyCode;
        display("keydown: " + key);
    }

    function keyDownHandler(e) {
        var key = e.which || e.keyCode;
        display("keyup: " + key);
    }

    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();

Live Copy | Source

Upvotes: 2

Related Questions