在 chrome 中启用记住密码时，JQuery 更改事件不会在密码字段上加载时触发答案

【问题标题】：JQuery change event does not fire on load on password field when remember password is enabled in chrome在 chrome 中启用记住密码时，JQuery 更改事件不会在密码字段上加载时触发
【发布时间】：2015-06-03 22:35:46
【问题描述】：

所以问题来了：在我的登录表单上，如果用户没有输入用户名和密码，那么登录按钮将被禁用。这工作正常。在 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 将记录正确的密码，并且登录按钮将变为启用状态。这不是期望的行为。如果启用了记住密码，则在加载页面时应启用登录按钮。我曾尝试在此函数运行后手动触发点击，但没有成功。

有人知道该地区的 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 中，当您记住密码时，该功能直到您单击屏幕上的任意位置后才会看到它。

【问题讨论】：

你能显示你的html代码吗？一个 jsFiddle 也会有所帮助。
您可以尝试使用setTimeout 甚至setInterval 来检查它是否已填充。也许尝试将autocomplete="off" 添加到输入字段。
你在 $(document).ready() 里面写过这个吗？
@Sushil 是的，这是从控制器中的 $this->view->docReadyJS 触发的。
@andybeli 我已经为 jsfiddle 添加了一个链接。

标签： javascript jquery google-chrome

【解决方案1】：

在您的 JsFiddle 中，您首先拥有以下内容

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

打算禁用按钮。请注意，如果两个字段都为空

，则以下条件将禁用按钮

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

如果 any 两者都为空，您想禁用该功能，所以应该是

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

这会产生所需的行为in your JsFiddle with said correction

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

【讨论】：