'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”，但我需要输入一个额外的字符才能被识别，并从按钮中删除“disabled”属性。

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

Answer 1

我希望在密码和确认密码字段具有匹配值之前禁用页面上的按钮

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

$('#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/

Answer 2

几个月前我遇到了同样的问题。
尝试使用 Jquery 中的 keyup 函数。

Keypress 事件在您按下键时触发，因此输入尚未填充。
释放键时触发 Keyup 事件。

Answer 3

可以使用input 事件并将其简化为

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