'keypress' jQuery 事件是否在输入值更新之前触发？

Question

I have a keypress event listener on an input field to confirm a password. I want the button on the page to be disabled until the password and confirm-password fields have matching values. I am using the .keypress() jQuery function, but it seems to always be one character behind what I expect it to be?

Here is the code

$('#confirm').keypress(function() {
    console.log('#confirm').val();
    if($('#password').val() == $('#confirm').val()) {
        $('button').removeProp('disabled');
        console.log("yes");                
    } else {
        console.log("no");
    }
});

But when I inspect element and look at the console window on my page, the first time the event is fired it prints the form value as blank. Then when I enter a second character, it prints only the first, and when I type a third character it prints the first two, etc.

For example, if I put asd into the password field and begin typing the same into the confirm field the output will look like this:

<blank> no a no as no

So at this point both password and confirm fields have "asd", but I need to enter an extra character before that is recognized and the "disabled" property is removed from the button.

I have tried using .change() instead of .keypress() but that doesn't fire until the input field loses focus, which is not what I want.

Answer 1

I want the button on the page to be disabled until the password and confirm-password fields have matching values

If this is your goal, you can add event listeners to both inputs that call a validation function:

$('#password').on("input", function() { validatePassword(); });

$('#confirm').on("input", function() { validatePassword(); });

function validatePassword() {
    if($('#password').val() && $('#confirm').val() && $('#password').val() == $('#confirm').val()) {
        $('button').prop('disabled', false);
    } else {
        $('button').prop('disabled', true);
    }
}

It also may be worthwhile adding an ID to the button. Using 'button' would enable/disable all elements on the page.

Example: https://jsfiddle.net/doL4t9vv/1/

Answer 2

I had the same problem few months ago.
Try to use the keyup function from Jquery.

Keypress event is fired when you press the key, so the input is not fill yet.
Keyup event is fired when you release the key.

Answer 3

Can use input event and simplify this down to

var $passwords =$('#confirm, #password').on('input', function() {
    var thisValue = this.value.trim();
    // does this input have value and does it match other
    var isValid = thisValue  && thisValue  === $passwords.not(this).val().trim();
    // boolean used for disabled property    
    $('button').prop('disabled', !isValid);      
});