CODEWITHSUNDEEP
javascriptjquerykeydownkeyup
Jack Guy
Jack Guy

Reputation: 8523

jQuery wait for keyup after keydown

I'd like to trigger an event once after key down and a different event only after the down arrow key has been released, like so:

$('body').keydown(function (e)
{
    if(e.keyCode==40)
    {
        //do something
    }
    $('body').keyup(function (d)
    {
        if(d.keyCode==40)
        {
            //do something else
        }
    }
}

This code only functions partially. The keydown is triggered continuously as the down arrow key is held.

I have a setInterval whose refresh rate I'm altering when I hold the arrow key. Unforunately setTimeOut isn't an option in this situation.

So my code looks something like this:

        clearInterval(interval);
        refresh = 100;
        interval();

Upvotes: 0

Views: 4125

Answers (4)

Eugene Naydenov
Eugene Naydenov

Reputation: 7295

$('body').keydown(function (e) {
    if(e.keyCode==40) {
        //do something
    }
    return false;
})
.keyup(function(e) {
    if(e.keyCode==40) {
        //do something else
    }
    return false;
});


$('body').on('keyup', function (e) {
    if(e.keyCode==40) {
        //do something
    }
    // after first keyup set to handle next keydown only once:
    $(this).one('keydown', function(e) {
        if(e.keyCode==40) {
            //do something else
        }
    });
});

If you need exactly trigger the event and not handle as it's in your example, then you need to use $.trigger() method.

Upvotes: 1

Paul S.
Paul S.

Reputation: 66334

If you really need to remove the keyup listener when you're done, http://jsfiddle.net/CgmCT/

document.body.addEventListener('keydown', function (e) {
    if(e.keyCode === 40){
        console.log('key 40 down');
        // key down code
        document.body.addEventListener('keyup', function listener(d){
            if(d.keyCode === 40){
                document.body.removeEventListener('keyup', listener, true);
                console.log('key 40 up');
                // key up code
            }
        }, true);
    }
}, true);​

Upvotes: 0

Niko
Niko

Reputation: 26730

If you want to do some action only once while the key remains pressed, simply keep track of that:

var arrowKeyDown = false;

$('body').keydown(function(e) {
    if (e.which == 40 && !arrowKeyDown) {
        arrowKeyDown = true;
        // ...
    }
});

$('body').keyup(function(e) {
    if (e.which == 40) {
        arrowKeyDown = false;
    }
});

Demo: http://jsfiddle.net/utfwQ/

Upvotes: 1

Rafael Herscovici
Rafael Herscovici

Reputation: 17104

$('body').keydown(function (e)
{
    console.log('down');
}​).keyup(function(e){console.log('up')});​​​​

Upvotes: 0

Related Questions