Question

所以这是问题所在：在我的登录表单上，如果用户未输入用户名和密码，则将禁用登录按钮。这很好用。在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中，只有在您点击屏幕上的任何位置后，该功能才能看到它。

Answer 1

在你的JsFiddle中你有第一个

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

打算禁用该按钮。请注意，如果两个字段为空，则以下条件将禁用该按钮

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

如果两者的任何为空，则要禁用此功能，因此应该

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

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

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

在Chrome

1 个答案: