JQuery改变事件不火灾加载上的密码字段时，记住密码在chrome浏览器中启用

JQuery change event does not fire on load on password field when remember password is enabled in chrome

本文关键字：密码 chrome 启用 浏览器 字段 事件 改变 火灾 加载 JQuery      更新时间：2023-09-26

问题来了:在我的登录表单上，如果用户没有输入用户名和密码，那么登录按钮将被禁用。这很好。在Chrome中，如果你有记住密码启用，页面将加载和用户名和密码字段将得到填充，但登录按钮将保持禁用。这是JS:

var submitBtn = $('#authSubmit');
$('#username').bind('keyup click mousedown paste change input',function(){
        if ($('#username').val() != '' && $('#password').val() != '') {
            submitBtn.removeAttr('disabled');
            submitBtn.removeClass('customDisabledBtn');
            submitBtn.addClass('customButton');
        } else if($('#email').get(0)) {
            if($('#username').val() != '' || $('#email').val() !== '') {
                submitBtn.removeAttr('disabled');
                submitBtn.removeClass('customDisabledBtn');
                submitBtn.addClass('customButton');
            }
        } else {
            submitBtn.attr('disabled', 'disabled');
            submitBtn.addClass('customDisabledBtn');
        };
    });
$('#password').bind('keyup click mousedown paste change input',function(){
    if ($('#username').val() != '' && $('#password').val() != '') {
        console.log($('#password').val());
        submitBtn.removeAttr('disabled');
        submitBtn.removeClass('customDisabledBtn');
        submitBtn.addClass('customButton');
    } else {
        submitBtn.attr('disabled', 'disabled');
        submitBtn.addClass('customDisabledBtn');
    };
});

在页面加载时，console.log将不记录任何内容。但是，一旦单击页面上的任何位置，该函数将再次运行，console.log将记录正确的密码，并且将启用登录按钮。这不是我们想要的行为。如果启用了记住密码，那么在加载页面时应该启用登录按钮。我已经尝试在此函数运行后手动触发点击，但没有运气。

谁知道是否有一个bug与Chrome在该地区?还是我做错了什么?

下面是HTML:

<form id="authLogin" name="authLogin" method="post" action="/auth/dologin">
    <fieldset id="formFieldset">
                <p class="formField contentTextIcons">
                    <label for="username"><?= $this->siteLabels['UserName']; ?>:</label>
                    <input type="text" id="username" name="username" />
                </p>
                <p class="formField contentTextIcons">
                    <label for="password"><?= $this->siteLabels['Password']; ?>:</label>
                    <input type="password" id="password" name="password" />
                </p>
            </fieldset>
            <div class="loginBtns clearfix">
                <p class="loginBtn">
                    <button id="authSubmit" class=""><?= $this->siteLabels['SignInBtn']; ?></button>
                </p>
            </div>
        </form>

这是小提琴:https://jsfiddle.net/jbekis/2hbvv95r/3/

但问题是，在Chrome中，当你记住你的密码时，该功能不会看到它，直到你点击屏幕上的任何地方。

在您的JsFiddle中，您有以下第一个

if($('#username').val() == '' && $('#password').val() == ''){
    submitBtn.attr('disabled', 'disabled');
    submitBtn.addClass('customDisabledBtn');
}

表示禁用按钮。注意，如果两个字段都为空，则以下条件将禁用该按钮

$('#username').val() == '' && $('#password').val() == ''

如果中的任何都为空，则需要禁用该功能，因此应该是

$('#username').val() == '' || $('#password').val() == ''

在你的JsFiddle中产生期望的行为。

您还应该考虑将禁用按钮的行为抽象为一个函数，以避免代码重复

相关文章：