How to detect a key pressed for x seconds in javascript?

Question

I need to detect when a user keep press a button for X second and call function in JavaScript. Could you point me out in right direction?

Answer 1

You can use a setTimeout function on the keydown event which will fire after X seconds to compare the time that event was triggered to the last time a keyup was triggered - if at all.

var lastKeyUpAt = 0;

$(elem).on('keydown', function() {
    // Set key down time to the current time
    var keyDownAt = new Date();

    // Use a timeout with 1000ms (this would be your X variable)
    setTimeout(function() {
        // Compare key down time with key up time
        if (+keyDownAt > +lastKeyUpAt)
            // Key has been held down for x seconds
        else
            // Key has not been held down for x seconds
    }, 1000);
});

$(elem).on('keyup', function() {
    // Set lastKeyUpAt to hold the time the last key up event was fired
    lastKeyUpAt = new Date();
});

elem here is the element you're wanting to handle the event on.

JSFiddle demo.