可观察到的淘汰赛和Google Chrome自动填充问题 [英] Knockout Observable and Google Chrome Auto-Fill issue

问题描述

基本上，我在登录表单上有一个登录按钮，该按钮可以与jQuery 1.8.3(我尝试过1.9.0)和Knockout 2.2.1可观察对象配合使用，并具有启用/禁用登录按钮的绑定.

Basically, I have a login button on a login form that works fine with jQuery 1.8.3 (I've tried 1.9.0) and Knockout 2.2.1 observables and a binding to enable/disable the login button.

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

The enable button is disabled when the computed function sees that there is a missing username OR password.

但是，当Google Chrome(24.0.1312.56 m)在页面加载后不久自动填充文本框时，就会出现问题. Chrome浏览器何时更新文本框，因此视图模型和计算出的可观察对象无法检测到，因此按钮保持禁用状态.

However, the problem arises when Google Chrome (24.0.1312.56 m) autofills the textbox a few moments after the page loads. The viewmodel and computed observable doesn't detect when Chrome updates the textbox so the button stays disabled.

我做了一个基本的jsfiddle.我不知道如何使jsfiddle自动填充以显示此问题:)您只需要相信我.

I made a basic jsfiddle. I have no clue how to make the jsfiddle autofill to show this problem :) You'll just have to trust me.

Javascript/ViewModel

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/

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

谢谢！

推荐答案

您可以

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

• bind a change event handler to the text object and manually call the self.loginInfoValid method, or
• use setTimeout to wait a short time and manually call the self.loginInfoValid method.

如果Chrom自动填充时抛出change事件，那将是我对这两者的首选解决方案.

If the change event is thrown when Chrom autofills, that would be my preferred solution of the two.

这篇关于可观察到的淘汰赛和Google Chrome自动填充问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！