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 (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!

Should the button become disabled again if the text is deleted? If so, you'll probably have to stick with keypress. — Brilliand, Jan 27 '14 at 19:00

score 152 · Accepted Answer · edited Oct 24 '12 at 14:29

152

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.

edited Oct 24 '12 at 14:29

Simon Arnold

15,849
7
67
85

answered Jun 17 '10 at 16:11

Hooray Im Helping

5,194
4
30
43

@Brilliand You're right. I made a workaround for this, it's posted below. – David Oliveros Jan 26 '14 at 04:08
7

how who you accomplisch this on iPhone/Android devices? They don't support the keyup function. – Merijn Den Houting Aug 27 '14 at 14:10
4

definition of keypress is not exactly correct. that's the definition of keydown. see http://www.quirksmode.org/dom/events/keys.html – challet Oct 20 '14 at 22:10

score 63 · Answer 2 · answered Aug 07 '14 at 00:50

63

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

answered Aug 07 '14 at 00:50

But those new buttons though..

21,377
10
81
108

9

Wow, this is the answer to several unanswered/badly answered SO questions. – Ben Racicot Nov 02 '15 at 19:13
4

This is also great when you need to ignore pressing arrow keys, shift etc. in input field. – hovado Nov 19 '15 at 14:02
2

http://caniuse.com/#search=input Relatively good browser support. Much better answer than listening to every keyup. – James Haug Aug 02 '16 at 03:27
1

It saves my day! Thank you. I used the following code: $('.subject_mark').on("input", function () { var $th = $(this); $th.val($th.val().replace(/[^0-9]/g, function (str) { return ''; })); – arshovon Jan 05 '17 at 11:50

score 9 · Answer 3 · edited Aug 24 '16 at 15:56

9

instead of keypress, use keyup.

edited Aug 24 '16 at 15:56

johnnyRose

7,310
17
40
61

answered Jun 17 '10 at 16:12

Kris van der Mast

16,343
8
39
61

score 5 · Answer 4 · answered Jan 26 '14 at 04:07

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

answered Jan 26 '14 at 04:07

David Oliveros

661
8
12

This will still behave strangely in the case of holding down Backspace... perhaps keypress with a timeout of 0? – Brilliand Jan 27 '14 at 16:14
Ah, never mind, the OP doesn't specify what should happen if the text field is cleared. – Brilliand Jan 27 '14 at 18:59

Pointy · Answer 5 · 2016-01-01T14:28:08.240

5

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.

edited Jan 01 '16 at 14:28

answered Jun 17 '10 at 16:12

Pointy

405,095
59
585
614

It's not a matter of benig *smart*. The keyup event doesn't provide the same result. You get distinct events for shift, ctrl,etc with keyup - if you want to get the actual character being typed (such as an ampersand) rather than a series of key events that you have to check the state of shift or ctrl keys, keypress is the way to go. – Ripside Jun 05 '15 at 16:42
1

Right; that's what I meant by "it's semantics are different". – Pointy May 06 '16 at 12:53

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

5 Answers5

Linked

Related