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

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

6,796
5
36
42

answered Feb 01 '12 at 15:58

Marc B

348,685
41
398
480

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