Prevent two arrow keys from outputting if pressed at same time

Question

I have the following code (it basically changes the image I have set depending on the key I press). The problem I am having is when the user presses two keys at the same time. (ex: Right Arrow key and Left Arrow key). How can I prevent output if more than one key is pressed at the same time?

  <div id="slide"><img src="http://i.imgur.com/r41vA8p.png" /></div>
  </div>

 $(document).keydown(function(e){
      if (e.keyCode == 37) { 
           $('#slide').html('<img src="img">');
        }
      if (e.keyCode == 38) {
           $('#slide').html('<img src="img">');
        }
      if (e.keyCode == 39) { 
           $('#slide').html('<img src="img">');
        }
      if (e.keyCode == 40) { 
           $('#slide').html('<img src="img">');
        }
    });

Thanks.

Better Explanation:

if left is pressed and held down, then simultaneously right is pressed, no event should occur, nor toggle to right in that instance.

Can you throw it in a jsfiddle? From what I can tell, the last key down is what will show. — Casey Dwayne
– Casey Dwayne, Commented Apr 2, 2014 at 23:49
Sure no problem, jsfiddle.net/CcrjW/1, It detects whichever key comes last, yup. I just want it to stay as it's default image if two keys are pressed at the same time. — WalkOfLife
– WalkOfLife, Commented Apr 3, 2014 at 0:01
@WalkOfLife If interpret requirement correctly, if left is pressed and held down, then simultaneously right is pressed, no event should occur ? Not toggle to right in that instance ? — guest271314
– guest271314, Commented Apr 3, 2014 at 0:12
whatever is the last key down is what will be placed. combining keys is a bit trickier. — Casey Dwayne
– Casey Dwayne, Commented Apr 3, 2014 at 0:13

Senju · Accepted Answer · 2014-04-03 01:31:14Z

3

This would be easier if JavaScript supported the XOR comparison operator. I had to create the XOR with ANDs ORs and NOTs (&&, ||, !). But, it works.

Every time an arrow key is pressed it turns true in the map. If more than one is true at the same time do nothing, else change the image accordingly.

Every time an arrow key is lifted up it becomes false in the map.

var map = {37: false, 38: false, 39: false, 40:false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
         if((map[37] && !map[38] && !map[39] && !map[40]) ||
            (!map[37] && map[38] && !map[39] && !map[40]) ||
            (!map[37] && !map[38] && map[39] && !map[40]) ||
            (!map[37] && !map[38] && !map[39] && map[40])) {
            if (map[37]) {
                $('#im').html('<img src="http://i.imgur.com/BXeUGsv.png">');
            } else if (map[38]) {
                $('#im').html('<img src="http://i.imgur.com/MaU1zD0.png">');
            } else if (map[39]) {
                $('#im').html('<img src="http://i.imgur.com/kY8MnnC.png">');
            } else if (map[40]) {
                $('#im').html('<img src="http://i.imgur.com/r41vA8p.png">');
            }
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

Edit

The old code allowed three buttons to be pressed. Fixed it.

Demo new code here

Old answer fiddle here

edited Apr 3, 2014 at 1:31

answered Apr 3, 2014 at 0:59

Senju

1,04510 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WalkOfLife Over a year ago

Exactly what I wanted. And a clever way of doing it! Nice.

Senju Over a year ago

@WalkOfLife Check out the updated code. While the old code didn't allow 2 keys be simultaneously pressed it did allow for 3 to be pressed.

WalkOfLife Over a year ago

I didn't even notice. Thanks once again!

Casey Dwayne · Accepted Answer · 2014-04-03 00:53:06Z

1

Here is a slightly better way to make this happen.. recursive and uses which instead of keyCode (for cross-browser reasons).

Example

var base,neutral,up,down,left,right;

  base = 'http://www.designofsignage.com/application/symbol/hospital/image/600x600/';
  neutral = 'emergency.jpg';
  up = 'arrow-up.jpg';
  down = 'arrow-down.jpg';
  left = 'arrow-left.jpg';
  right = 'arrow-right.jpg';

var change_image = function(src){
  $('#slide img').attr('src',base+src);
}

change_image(neutral); //default

$(document).on('keydown',function(e){
  var k = e.which;
  switch(k){
    case 37:
      change_image(left);
    break;
    case 38:
      change_image(up); 
    break;
    case 39:
      change_image(right);  
    break;
    case 40: 
      change_image(down);   
    break;          
  }

}).on('keyup',function(){
  change_image(neutral); //default on keyup
});

Ran out of time

Essentially, you set "states" for each of the arrow keys on down, reset on up. The problem is active_states rises while an arrow key is pressed. Just fix that and you're good to go!

http://codepen.io/anon/pen/rBcGL/

edited Apr 3, 2014 at 0:53

answered Apr 3, 2014 at 0:21

Casey Dwayne

2,1691 gold badge17 silver badges33 bronze badges

1 Comment

WalkOfLife Over a year ago

+1 Edit, didn't notice your comment. Waiting for the adjustements :)!

Collectives™ on Stack Overflow

Prevent two arrow keys from outputting if pressed at same time

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related