浏览器自动填充和数据绑定 [英] Browser Autofill & databinding

问题描述

我有一个相当简单的表格，里面有一封电子邮件和一个密码输入字段。对于我的网页，谷歌浏览器的自动填充/保存密码已激活。现在，每当我加载网页时，Chrome都会自动填充电子邮件和密码字段（很好）。

问题是EmberJS似乎没有看到这些自动填充的值。例如，如果我在控制器中使用 this.get（'userName'），则ember将返回空白值。

要让余烬看到这些自动填充的值，我必须单击每个 {{input}} 或通过它们进行制表，然后余烬开始看到它。 / p>

这真的是一个非常简单的形式：

 ÷ div; 
< form class = form-signin form-vertical id = login-form {{action login on = submit}}> 
 
< h3 class = form-signin-heading文本中心sf-primary-color>请登录< / h3> 
 
 {{input class = form-control name = email placeholder =电子邮件地址 value = userName type = text tabindex = 1}} 
 {{input class = form-control name = password placeholder = Password value =密码type = password tabindex = 2}} 
 
 {{#iferrorMessage}} 
< div class = alert alert-danger text-center sf-fade-in> {{errorMessage}}< / div> 
 {{/ if}} 
 
< div class = well> 
您可以使用< kbd> demo< / kbd> /< kbd" demo< / kbd>登录。 
< / div> 
 
 {{input type = submit value =登录 tabindex = 3}} 
 
< / form> 
< / div> 
  

我创建了小提琴。这个问题在小提琴中无法重现，因为无论我运行了多少次。浏览器不提供保存密码的功能。

听起来好像Ember的数据绑定没有检测到浏览器自动填充的 {{input}}

顺便说一句，我不得不使用此处，以便获取这些输入字段以提供自动完成功能。

编辑：我定义了一个如下所示的观察器，并且在首次加载该网站并且自动填充完成其工作时不会触发该观察器。 / p>

  userNameChanged：function（）{
 console.log（'User Name Changed'）; 
} .observes（'userName'），
  

版本信息如下：

 调试：---------------------------- --- ember.js：3461 
调试：Ember：1.4.0 ember.js：3461 
 DEBUG：灰烬数据：1.0.0-beta.4 ember.js：3461 
 DEBUG ：把手：1.3.0 ember.js：3461 
调试：jQuery：1.10.2 ember.js：3461 
调试：----------------- -------------- 
  

解决方案

不是完美的但实用的解决方案：

  Ember.TextField.reopen（{
 
 fetchAutofilledValue： function（）{
 var $ textField = this。$（）; 
 setTimeout（function（）{
 $ textField.trigger（ change）
}，250）; 
} .on（'didInsertElement'）
 
}）; 
  

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: ------------------------------- 

解决方案

Not perfect but functional solution:

Ember.TextField.reopen({

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

});

这篇关于浏览器自动填充和数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！