Question

基本上，我在登录表单上有一个登录按钮，可以正常使用jQuery 1.8.3（我已经尝试过1.9.0）和Knockout 2.2.1 observables以及启用/禁用登录按钮的绑定。

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

但是，当Google Chrome（24.0.1312.56 m）在页面加载后片刻自动填充文本框时，会出现问题。视图模型和计算的observable不会检测Chrome何时更新文本框，以便按钮保持禁用状态。

我做了一个基本的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/

谢谢！

Answer 1

你可以

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

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

Answer 2

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

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

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

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

Knockout Observable和谷歌Chrome自动填充问题

2 个答案: