Jquery 淘汰可观察和谷歌Chrome自动填充问题

基本上，我在登录表单上有一个登录按钮，可以很好地与jQuery 1.8.3（我已经尝试了1.9.0）和Knockout 2.2.1 Observable配合使用，并且有一个绑定来启用/禁用登录按钮

当计算函数发现缺少用户名或密码时，“启用”按钮被禁用

然而，当Google Chrome（24.0.1312.56 m）在页面加载几分钟后自动填充文本框时，问题就出现了。当Chrome更新文本框时，viewmodel和computed observable不会检测到，因此按钮保持禁用状态

我做了一个基本的JSFIDLE。我不知道如何让jsfiddle自动填充来显示这个问题：）你只需要相信我

Javascript/ViewModel

$(document).ready(function(e) {
    var loginViewModel = function() {

        var self=this;
        self.loginName = ko.observable("");
        self.loginPass = ko.observable("");

        self.loginInfoValid = ko.computed(function() {

            if (self.loginName().length > 0 && self.loginPass().length > 0) {
                return true;
            } else {
                return false;
            }

        });

    };

    ko.applyBindings(new loginViewModel());     
});

HTML

登录

jsfiddle：

谢谢

你可以

• 将

  change

  事件处理程序绑定到文本对象，并手动调用

  self.loginInfoValid

  方法，或
• 使用

  setTimeout

  等待一小段时间，然后手动调用

  self.loginInfoValid

  方法

---

如果Chrom autofills时抛出

change

事件，这将是我首选的两种解决方案。

找到了一种很好的不引人注目的方法，例如：

var emailInput = $('#email');
var passwordInput = $('#password');

emailInput.on('blur', function () { passwordInput.trigger('change'); });

---

因此，当您对电子邮件/用户输入失去关注时，它将触发密码输入上的更改事件，从而更新viewmodel上的密码属性。

是否关闭自动完成选项？Steven-最好不要在此登录表单上。对于其他恼人的输入，我会记住这一点。谢谢作为记录，同样的问题也发生在我手机上的Chrome35上。在计算机上的Chrome 34上没有出现这种情况。

change

在Chrome自动填充时似乎不会触发。似乎setTimeout是“破解它的方法”，实际上我最终使用setTimeout发送了一个keyup/keydown事件。黑客们觉得自己大错特错，我想找到一个更好的方法。我在发布一个淘汰错误时有点犹豫，因为我不确定我是否误读了文档。谢谢杰夫。同样，我不确定这是否被认为是一个bug。也许一个更健壮的解决方案是在提交表单时触发“更改”。

var emailInput = $('#email');
var passwordInput = $('#password');

emailInput.on('blur', function () { passwordInput.trigger('change'); });