Geek Answers Handbook

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

I need to determine when the user holds the button for X seconds and the call function in JavaScript. Could you point me in the right direction?

+4
source share
5 answers

You can use a setTimeoutfunction in an event keydownthat will fire after X seconds to compare the last time that this event was fired when it fires keyup- 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 want to handle the event on.

JSFiddle demo .

+5
source

jquery, . - .

var keyTO,
    seconds = 5;
$( "#i" ).on({
  keypress: function(e) {
        if(keyTO) {
            clearTimeout(keyTO);
            keyTO = null;
        }
        keyTO = setTimeout(someFn, seconds*1000);
  },
  keyup: function(e) {
      clearTimeout(keyTO);
      keyTO = null;
  }
});
function someFn() {
    // only called after full timeout
    alert('Sweet.');
}
+1

keydown keyup . jQuery keydown . - , / .

( nbrooks ), , , , .

$(function(){
    var keyDownArray = {};
    var triggerTime = 3000; // number of ms to trigger function at

    var keyDownEvent = function(e){
        // use the event keyCode as a unique identifier
        if(!(e.keyCode in keyDownArray) ){
            // use the event keyCode as a unique identifier
            // use setTimeout to make sure trigger only occurs once
            keyDownArray[e.keyCode] = setTimeout(function(){
                // call your function here (can pass in e.keyCode if function requires custom functions on a per key basis)
                console.log('triggered for key '+e.keyCode);
            }, triggerTime);
        }
    }

    var keyUpEvent = function(e){
        // on key release, clearTimeout and delete object key
        clearTimeout(keyDownArray[e.keyCode]);
        delete keyDownArray[e.keyCode];
    };

    $(document).on('keydown', keyDownEvent)
        .on('keyup', keyUpEvent);
});

JSFiddle Demo

PS. , (- Ben Almans debounce/throttle plugin),

+1

jsFiddle

, , . JS, .

keyDown ( - ). keyUp , :

$(function () {
    var keyTimes = {};

    $(document).keydown(function (e) {
        if (!keyTimes["key" + e.which]) {
            keyTimes["key" + e.which] = new Date().getTime();
        }
    });

    $(document).keyup(function (e) {
        if (keyTimes["key" + e.which]) {
            var x = new Date().getTime() - keyTimes["key" + e.which];
            delete keyTimes["key" + e.which];

            // key was held for x/1000.0 seconds
        }
    });
});
+1

keydown() keyup() . keydown() , keyup().

var starttime;
var curKey;

$('#seconds-counter').keydown(function(e) {
  if (curKey != e.which) {
    var d = new Date();
    starttime = d.getTime();
    $('#down-time').text(starttime);
    curKey = e.which;
  }
});

$('#seconds-counter').keyup(function() {
  var d = new Date();
  var endTime = d.getTime();
  $('#up-time').text(endTime);
  var timeTaken = endTime - starttime;
  $('#result-val').text(timeTaken / 1000);
  curKey = null;
});

JS Fiddle

(Edit: :-)) keyup() curKey = null.

0

More articles:


All Articles