jquery - Knockout Observable 和 Google Chrome 自动填充问题

Question

基本上，我的登录表单上有一个登录按钮，可以与 jQuery 1.8.3(我尝试过 1.9.0)和 Knockout 2.2.1 可观察对象一起正常工作，以及用于启用/禁用登录按钮的绑定(bind)。

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

但是，当 Google Chrome (24.0.1312.56 m) 在页面加载后不久自动填充文本框时，就会出现问题。 View 模型和计算的可观察量不会检测 Chrome 何时更新文本框，因此该按钮保持禁用状态。

我做了一个基本的jsfiddle。我不知道如何让 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

<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/

谢谢!!

Answer 1

您可以

• 将 change 事件处理程序绑定(bind)到文本对象，并手动调用 self.loginInfoValid 方法，或者
• 使用setTimeout等待一小段时间，然后手动调用self.loginInfoValid方法。

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