Browser Autofill & databinding

问题

I have this rather simple form which has a email and a password input field. For my webpage Google Chrome's autofill/save password has activated. Now whenever I load my webpage, Chrome autofills the email and password field (which is nice).

Problem is EmberJS doesn't seem to "see" these auto filled values. If I use this.get('userName') for example in the controller, ember returns me blank values.

In order to have ember "see" these autofilled values, I have to click on each {{input}} or tab through them and then ember begins to see it.

It's a very simple form really:

<div>
<form class="form-signin form-vertical" id="login-form" {{action "login" on="submit"}}>

    <h3 class="form-signin-heading text-center sf-primary-color">Please Login</h3>

    {{input class="form-control" name="email" placeholder="Email address" value=userName type="text" tabindex=1}}
    {{input class="form-control" name="password" placeholder="Password" value=password type="password" tabindex=2}}

    {{#if errorMessage}}
        <div class="alert alert-danger text-center sf-fade-in">{{errorMessage}}</div>
    {{/if}}

    <div class="well">
        You may login with <kbd>demo</kbd>/<kbd>demo</kbd>.
    </div>

    {{input type="submit" value="Log In" tabindex=3}}

</form>
</div>

I have created a fiddle as well. The problem is not reproducible in the fiddle, because no matter how many times I've run it. The browser does not offer to save the password.

It does sound like Ember's data binding is not detecting a browser autofilled {{input}}

As an aside, I had to use the trick outlined here in order to get these input fields to offer auto complete.

EDIT: I defined an observer like below and it is not fired when the site is first loaded and auto fill has done it's job.

    userNameChanged: function() {
        console.log('User Name Changed');
    }.observes('userName'),

Version Info follows:

DEBUG: ------------------------------- ember.js:3461
DEBUG: Ember      : 1.4.0 ember.js:3461
DEBUG: Ember Data : 1.0.0-beta.4 ember.js:3461
DEBUG: Handlebars : 1.3.0 ember.js:3461
DEBUG: jQuery     : 1.10.2 ember.js:3461
DEBUG: -------------------------------

回答1:

Not perfect but functional solution:

Ember.TextField.reopen({

  fetchAutofilledValue: function() {
    var $textField = this.$();
    setTimeout( function(){
      $textField.trigger("change")
    }, 250);
  }.on('didInsertElement')

});

回答2:

This is what I'm using ATM.

Ember.TextField.reopen({
    triggerEvents: function () {
        Ember.run.next(this, function () {
            this.$().trigger("change");
        });
    }.on("didInsertElement")
});

Modification of the solution found in the linked github issue thread.

(Updated according to @briangonzalez's suggestion)

回答3:

I don't have an answer, but I do have the same problem, and I found this Github issue: https://github.com/emberjs/ember.js/issues/2968

Also, this is a nice summary about which events are dispatched by different browsers on autofill: http://avernet.blogspot.in/2010/11/autocomplete-and-javascript-change.html

来源：https://stackoverflow.com/questions/22324473/browser-autofill-databinding

标签

ember.js