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

javascript jquery events forms javascript-events
Jörg Brenninkmeyer picture Jörg Brenninkmeyer · Jun 17, 2010 · Viewed 81.5k times · Source

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!

Answer

Hooray Im Helping picture Hooray Im Helping · Jun 17, 2010

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.

Related questions

Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More
jQuery Event Keypress: Which key was pressed?

With jQuery, how do I find out which key was pressed when I bind to the keypress event? $('#searchbox input').bind('keypress', function(e) {}); I want to trigger a submit when ENTER is pressed. [Update] Even though I found …

Read More
How do I attach events to dynamic HTML elements with jQuery?

Suppose I have some jQuery code that attaches an event handler to all elements with class .myclass. For example: $(function(){ $(".myclass").click( function() { // do something }); }); And my HTML might be as follows: <a class="myclass" href="#">test1</…

Read More