3

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.

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.

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

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

Thank you!!

4

2 に答える 2

1

次のいずれかを実行できます

  • changeイベント ハンドラーをテキスト オブジェクトにバインドし、self.loginInfoValidメソッドを手動で呼び出す、または
  • を使用setTimeoutして短時間待機し、手動でself.loginInfoValidメソッドを呼び出します。

changeChrom のオートフィル時にイベントがスローされた場合、それが 2 つの解決策として私の好みです。

于 2013-01-25T20:46:54.420 に答える