javascript - How to prevent knockout.js from deleting form field values prefilled by FireFox when applying bindings -

firefox prefills form values in input boxes after loading pages (such usernames etc...).

if apply knockout.js bindings prefilled form, @ moment of applying bindings knockout clear out input fields (causing short flicker).

is there way keep prefilled values rather erasing them?

   var usermodel = function() {         this.username = ko.observable();         this.password = ko.observable();         this.passwordrepeat = ko.observable();         ....    }    ....    domready(function() {       //values prefilled firefox in input box bound username        //erased after applybindings executed       ko.applybindings(new usermodel());    }); 

you can use custom binding, or overwrite/extend textinput and/or value bindings initialize observables values dom.

// w/ custom binding ko.bindinghandlers.prefilledtext = {     init: function(el, valueaccessor) {         // set initial value         var initval = $(el).val()         valueaccessor()(initval)          // apply normal textinput binding         ko.applybindingstonode(el, {             textinput: valueaccessor()         })     } }  // w/ extended textinput binding  // save reference initial binding var _textinputbinding = ko.bindinghandlers.textinput  ko.bindinghandlers.textinput = {     init: function(el, valueaccessor) {         // set initial value, same before         var initval = $(el).val()         valueaccessor()(initval)          // pass on regular textinput binding         _textinputbinding.init.apply(this, arguments)     },     // don't forget update function either!     update: _textinputbinding.update } 

and fiddle!