Knockout Review and Google Chrome AutoComplete Problem
Basically I have a login button on a login form that works fine with jQuery 1.8.3 (I tried 1.9.0) and 2.2.1 knockout observables and a binding to enable / disable the login button.
The enable button is disabled when the computed function sees that there is no username or password.
However, the problem occurs when Google Chrome (24.0.1312.56m) fills in the textbox automatically a few seconds after the page loads. The view model and computed observable do not detect when Chrome updates the textbox, so the button remains disabled.
I made a basic jsfiddle. I dont know how to do jsfiddle autocomplete to show this problem :) You just need 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!
source to share
You can either
- bind an event handler
change
to a text object and manually call the method,self.loginInfoValid
or - use
setTimeout
to wait a short time and call the method manuallyself.loginInfoValid
.
If the event change
is fired while doing Chrom autofills, this would be my preferred solution of the two.
source to share
Found a nice unobtrusive way to do it like:
var emailInput = $('#email');
var passwordInput = $('#password');
emailInput.on('blur', function () { passwordInput.trigger('change'); });
So, when you lose focus on the email / user login, it raises a password login change event, causing the password property on the updated model to update.
source to share