JQuery catching input value one character late

Question

I'm catching value of an input field:

    $('#input').on("keydown", function(){
        var city = $(this).val();
        console.log(city);
    });

When I type 'n' console returns nothing, I type 'ne' it returns 'n', type 'new' it returns 'ne'.

Why is this happening?

At keydown event, the key value has not been added to the field. It is intended to allow you to intercept it if you wish — vogomatix, May 15 '14 at 10:16
Obviously keydown is handled before the value is updated, try keyup instead — Mark Rijsmus, May 15 '14 at 10:17
see http://stackoverflow.com/questions/14031324/keydown-processes-previous-character-instead-of-current-one — Elle, May 15 '14 at 10:17

score 6 · Accepted Answer · answered May 15 '14 at 10:18

It's not catching it late, it's doing what it's supposed to, that is show the letters in console while the key is being pressed. A letter would appear in the input box only after the key has been released, which is why you see it on the next key press.

What you need is the .keyup() event:

$('#input').on("keyup", function(){

DEMO

score 3 · Answer 2 · answered May 15 '14 at 10:18

3

Use keypress event instead of keydown event.

answered May 15 '14 at 10:18

saikiran.vsk

1,788
1
10
11

score 1 · Answer 3 · answered May 15 '14 at 10:20

As my comment states, the keydown event occurs when the key is pressed but before the key value is added to the field. It is possible you may wish to prevent the key being added to the field or to implement some shortcuts, and this event is the opportunity to do so.

For a more complete explanation, read the JQuery Keyboard events section

score 1 · Answer 4 · answered May 15 '14 at 10:20

1

try this code,hope keyup will work

$('#input').on("keyup", function(){
        var city = $(this).val();
        console.log(city);
    });

answered May 15 '14 at 10:20

WAQAS AJMAL

279
4
16

score 1 · Answer 5 · answered May 15 '14 at 10:20

The keydown event is sent to an element when the user first presses a key on the keyboard.To determine which key was pressed, examine the event object that is passed to the handler function.

While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows.

For catching actual text entry, .keypress() may be a better choice.

score 1 · Answer 6 · answered May 15 '14 at 12:04

1

try this code,hope it will work for you

$("#input").keyup(function() {
   console.log($(this).val());
});

answered May 15 '14 at 12:04

Ramesh Boddepalli

191
1
7

score 0 · Answer 7 · answered May 15 '14 at 10:19

0

You have to use keyup in order to get what you want

  $('#input').on("keyup", function(){
        var city = $(this).val();
        console.log(city);
    });

think this is what you want

answered May 15 '14 at 10:19

Vicky

694
1
8
23

JQuery catching input value one character late

7 Answers7