How to disable repetitive keydown in jQuery

Question

When user keeps a key pressed, I want the keydown() event get called only once, but its called until user stops pressing the key.

Here is what I am trying to do:

   $(document).keydown(function(event){
     var keycode = (event.keyCode ? event.keyCode : event.which);
     if(keycode == '39'){
              $("#box").animate({"left": "+=30px"}, "fast");
     } 
   });

So, when user presses right arrow key, I want the div#box to move 30px to the right. It moves but if user keeps key pressed it flies away.

I need it to move only by 30px per press, and stop, even if user keeps the key pressed. Do you know how it can be accomplished?

On a convenience note, `event.keyCode ? event.keyCode : event.which` is equivalent to `event.keyCode || event.which`, even for non-Booleans. — Keen, Dec 07 '12 at 16:45
You can use the `repeat` attribute of the event's original `KeyboardEvent` property: if the event ist triggered a repeated time for a key being hold the `event.originalEvent.repeat` property will be `true` but `false` for the first event. — trsft, Jan 20 '23 at 15:27

score 18 · Accepted Answer · edited May 21 '15 at 22:56

18

Keep track of which keys are down, and ignore keycode 39 until a keyup even clears it:

var down = {};

$(document).keydown(function(event){
     var keycode = (event.keyCode ? event.keyCode : event.which);
     if(keycode == '39'){
          if (down['39'] == null) { // first press
              $("#box").animate({"left": "+=30px"}, "fast");
              down['39'] = true; // record that the key's down
          }
     } 
   });

$(document).keyup(function(event) {
     var keycode = (event.keyCode ? event.keyCode : event.which);
     down[keycode] = null;
});

edited May 21 '15 at 22:56

The Demz

7,066
5
39
43

answered Feb 01 '12 at 15:58

Marc B

356,200
43
426
500

Thank you for your approach! It worked. I am marking this as correct answer. – Nazar Feb 01 '12 at 16:54
1

I believe you have a syntax error? $(document).keyup(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); down[keycode] = null; }); – Nazar Feb 01 '12 at 16:56

score 2 · Answer 2 · answered Feb 01 '12 at 15:57

keep a flag and turn it green upon keydown i would suggest keyup though

$(document).keydown(function(event){
     $flag=false;
     var keycode = (event.keyCode ? event.keyCode : event.which);

      if(keycode == '39'){
           if(!$flag){
              $flag=true;
              $("#box").animate({"left": "+=30px"}, "fast");
      }
     } 
   });

How to disable repetitive keydown in jQuery

2 Answers2

Linked

Related