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

Question

我在输入字段上有一个按键事件监听器来确认密码。我想要 button在页面上被禁用，直到 password和 confirm-password字段具有匹配值。我正在使用 .keypress() jQuery 函数，但它似乎总是比我期望的差一个字符？

这是代码

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

但是当我检查元素并查看页面上的控制台窗口时，第一次触发事件时，它会将表单值打印为空白。然后，当我输入第二个字符时，它只打印第一个字符，当我输入第三个字符时，它打印前两个字符，依此类推。

例如，如果我输入 asd进入password字段并开始在 confirm 中输入相同的内容字段输出将如下所示:

<blank>
no
a
no
as
no


所以在这一点上都是password和 confirm字段有“asd”，但我需要输入一个额外的字符，然后才能识别该字符并从按钮中删除“禁用”属性。

我试过使用 .change()而不是 .keypress()但直到 input 才会触发字段失去焦点，这不是我想要的。

Answer 1

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

如果这是您的目标，您可以将事件监听器添加到调用验证函数的两个输入:

$('#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);
    }
}

向按钮添加一个 ID 也可能是值得的。使用“按钮”将启用/禁用页面上的所有元素。

示例:https://jsfiddle.net/doL4t9vv/1/