Knockout Observable 和 Google Chrome 自动填充问题答案

【问题标题】：Knockout Observable and Google Chrome Auto-Fill issueKnockout Observable 和 Google Chrome 自动填充问题
【发布时间】：2013-01-09 21:17:56
【问题描述】：

基本上，我在登录表单上有一个登录按钮，可以很好地与 jQuery 1.8.3（我尝试过 1.9.0）和 Knockout 2.2.1 可观察对象以及启用/禁用登录按钮的绑定。

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

但是，当 Google Chrome (24.0.1312.56 m) 在页面加载后片刻自动填充文本框时，就会出现问题。当 Chrome 更新文本框时，viewmodel 和计算的 observable 没有检测到，因此按钮保持禁用状态。

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

Javascript/视图模型

$(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

<input type="text" data-bind="value: loginName, valueUpdate:'afterkeydown'"><br>
<input type="text" data-bind="value: loginPass, valueUpdate:'afterkeydown'"><br>
<span data-bind="text: loginName"></span><br>
<button data-bind="enable: loginInfoValid">Login</button>

jsfiddle：http://jsfiddle.net/vW6Xy/1/

谢谢！！

【问题讨论】：

关闭自动完成是一个选项吗？
Steven - 最好不要在这个登录表单上。对于其他烦人的输入，我会记住这一点。谢谢！
记录在案，我手机上的 Chrome 35 也发生了同样的问题。它没有出现在计算机上的 Chrome 34 上。

标签： jquery google-chrome knockout.js

【解决方案1】：

你可以

将change 事件处理程序绑定到文本对象并手动调用self.loginInfoValid 方法，或者
使用setTimeout稍等片刻，手动调用self.loginInfoValid方法。

如果在 Chrom 自动填充时引发 change 事件，那将是我首选的两种解决方案。

【讨论】：

change 在 Chrome 自动填充时似乎不会被触发。似乎 setTimeout 是“破解它的方法”
我实际上最终使用 setTimeout 发送了一个 keyup/keydown 事件。黑客感觉很不对劲，我想找到一种更好的方法来做到这一点。我在发布淘汰错误时有点犹豫，因为我不确定我是否误读了文档。
谢谢杰夫。同样，我不确定这是否被视为错误。

【解决方案2】：

找到了一种不错的不引人注目的做法，例如：

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

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

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

【讨论】：

也许更稳健的解决方案是在提交表单时触发“更改”。