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”，但我需要在识别之前输入一个额外的字符，并从按钮中删除“禁用”属性。 / p>

我尝试使用.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);      
});

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

3 个答案: