CODEWITHSUNDEEP
javascriptjqueryformseventsjquery-events
Jörg Brenninkmeyer
Jörg Brenninkmeyer

Reputation: 3344

How can I get jQuery .val() AFTER keypress event?

I got:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Now the alert always returns the value BEFORE the keypress (e.g. the field is empty, I type 'a' and the alert gives me ''. Then I type 'b' and the alert gives me 'a'...). But I want the value AFTER the keypress - how can I do that?

Background: I'd like to enable a button as soon as the text field contains at least one character. So I run this test on every keypress event, but using the returned val() the result is always one step behind. Using the change() event is not an option for me because then the button is disabled until you leave the text box. If there's a better way to do that, I'm glad to hear it!

Upvotes: 104

Views: 89284

Answers (5)

Kris van der Mast
Kris van der Mast

Reputation: 16613

instead of keypress, use keyup.

Upvotes: 9

Pointy
Pointy

Reputation: 413720

Try something like this:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

That simply introduces a timeout so that after the "keypress" event loop completes, your code will run almost immediately thereafter. Such a short timer interval (even if rounded up by the browser) will not be noticeable.

edit — or you could use "keyup" like everybody else says, though its semantics are different.

Upvotes: 5

You Old Fool
You Old Fool

Reputation: 22941

Surprised that no one mentioned the js "input" event:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Recommended.

https://developer.mozilla.org/en-US/docs/Web/Events/input

Upvotes: 64

David Oliveros
David Oliveros

Reputation: 661

Alternatively, you can use the keydown event with a timeout of 0.

That way, the changes will be applied instantly, instead of being applied when the user stops holding the key.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});

Upvotes: 5

Hooray Im Helping
Hooray Im Helping

Reputation: 5264

Change keypress to keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypress is fired when the key is pressed down, keyup is fired when the key is released.

Upvotes: 153

Related Questions