jQuery .on() running before value given

Question

Why does .on() not get the value of the form input field (#forgot) before the keypress has happened.

$(document).ready(function() {
    $(document).on('keypress', '#pass', function() {
    var value = $.trim($('#pass').val());
        alert(value);
        if (!value.length) {
            alert("Show");
            $('#forgot').show();
        } else {
            alert("Hide");
            $('#forgot').hide();
        }
    });
});

When I type in the first character the alert shows no input. The second character leads to the value being only the first character. The .on() function seems to run before the key press is registered? How can I fix this or is there an alternative function?

I'll have a look at it now and see how I can implement it – Enayet Hussain May 11 '15 at 12:19 — Enayet Hussain, May 11 '15 at 12:19

score 6 · Answer 1 · edited May 11 '15 at 12:39

keypress event triggered when you press a key. It will not wait for the value to come. Try with keyup. keyup gets triggered when you a key is released after pressing, till that time the value is proccessed. -

 $(document).on('keyup', '#pass', function() {

keypress

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

keyup

The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

Note that keyup only fires once, so repeated characters aren't registered separately. — Ja͢ck, May 11 '15 at 12:22

Legionar · Accepted Answer · 2015-07-06T09:59:59.863

4

Simply change keypress to keyup:

$(document).ready(function() {
    $(document).on('keyup', '#pass', function() {
    var value = $.trim($('#pass').val());
        console.log(value);
        if (!value.length) {
            console.log("Show");
            $('#forgot').show();
        } else {
            console.log("Hide");
            $('#forgot').hide();
        }
    });
});

edited Jul 06 '15 at 09:59

answered May 11 '15 at 12:19

Legionar

7,472
2
41
70

Perfect! So is the only difference between keyup and keypress just when the function is run? – Enayet Hussain May 11 '15 at 12:21
1

`keypress` event is triggered when the key is pressed before the key is up. – Legionar May 11 '15 at 12:27
don't use alert() use console.log() stackoverflow.com/questions/8203473/… – Himesh Aadeshara Jul 06 '15 at 09:40
@HimeshAadeshara: rather check my answer, which is working, with ID `button` - http://stackoverflow.com/a/31242788/1631551 – Legionar Jul 06 '15 at 10:01

score 1 · Answer 3 · answered May 11 '15 at 12:19

1

You need the keyup event instead of the keypress.

So replace:

 $(document).on('keypress', '#pass', function() {

With

 $(document).on('keyup', '#pass', function() {

answered May 11 '15 at 12:19

Bas Slagter

9,831
7
47
78

score 1 · Answer 4 · answered May 11 '15 at 12:24

keypress event is triggered when the key is pressed before the key is up). So it won't get the complete value. Use keyup

JSFIDDLE DEMO

HTML

<input id="pass">

JQUERY

$(document).ready(function() {
    $(document).on('keyup', '#pass', function() {
    var value = $.trim($('#pass').val());
        alert(value);
        if (!value.length) {
            alert("Show");
            $('#forgot').show();
        } else {
            alert("Hide");
            $('#forgot').hide();
        }
    });
});

jQuery .on() running before value given

4 Answers4