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

Question

I got:

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

Now the alert always returns the value BEFORE the keypress (

Answer 1

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.

Answer 2

instead of keypress, use keyup.

Answer 3

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.

Answer 4

You may want to hook up an onchange event handler instead of using any of the key events.

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

Using Edit > Paste or a Right-Click then Paste will fire a change event, but not a key event. Note some browsers may simulate a key event on a paste (though I don't know of any) but you can't count on that behavior.

Answer 5

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));
});

Answer 6

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