CODEWITHSUNDEEP
javascriptjquerykeyboardjquery-events
Somebody's Alt
Somebody's Alt

Reputation: 11

Detect when a key is pressed and then released using jQuery

I would like to check, using jQuery, when a key is pressed and then released. Only after the release do I want the function to be run (it's okay if the only way to do this doesn't involve jQuery, but if there's a way for both I'd rather it be the one with fewer bytes).
I'm pretty sure that the solution would use a mix of keyup() and keydown(), or keypress() functions, but I haven't figured out how to chain them so that the code would receive the desired output. My current code is: 

$("body").keydown(function(event) {
    $("body").keyup(function(event) {
        console.log("key pressed/released");
        var keyPressed = keys[event.keyCode];
        player.hit(keyPressed);
    });
});

But that results in tens of key pressed/released messages being logged in the console after I release a key. Taking away either keydown() or keyup() results in key pressed/released messages being logged when I hit a key, or when I release it, respectively. keypress() also doesn't work in place of keydown(), keyup(), or just by itself. What should I do to acheive my desired result?

Upvotes: 0

Views: 3760

Answers (3)

Obsidian Age
Obsidian Age

Reputation: 42384

The trick is to separate out the two functions, then make use of a variable accessible to both functions.

Start by stating that no key is pressed. Inside your keydown(), run a conditional that checks whether or not a key is currently being pressed. By setting the key_pressed variable to true inside of the conditional, you'll only trigger the conditional once; when the key is first pressed.

Then when the key is released, set the variable back to false to state that no keys are currently being pressed. This will allow you to press a secondary key after releasing the first key, and trigger the conditional again:

var key_pressed = false;

$("body").keydown(function(event) {
  if (!key_pressed) {
    console.log("key pressed");
    key_pressed = true;
  };
});

$("body").keyup(function(event) {
  key_pressed = false;
  console.log('key released');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The benefit of doing it this way is that you're able to trigger logic specifically while the key is being held down.

Hope this helps! :)

Upvotes: 0

adeneo
adeneo

Reputation: 318352

I would like to check, using jQuery, when a key is pressed and then released.
Only after the release do I want the function to be run

Well, if keyup is fired, you can be sure the key was both pressed and released, otherwise that event wouldn't fire, so that's really all you need.

$(document).on('keyup', function() {
    console.log('key was released')
})

or without jQuery

document.addEventListener('keyup', function() {
    console.log('key was released')
});

The reason your code ends up logging tens, and then hundreds of messages, is because you bind events inside event handlers, which is a no-no.

Upvotes: 2

Confused Soul
Confused Soul

Reputation: 358

Well you can create a variable, say x. x is false. Separate the keyup and keydown functions. under keydown add an if(!x) and make x true. Under keyup add an if(x) and make x false. I don't code jquery but I thought this might help.

Upvotes: 0

Related Questions