如何使用 Ember 从表单中读取自动填充的 username/password

Question

现在我有一个有两个输入的表单：用户名和密码。如果我手动输入它们，我的验证函数可以获取这些值。但是，如果这些值是由浏览器的自动填充功能填充的。 Ember 由于没有触发任何事件，无法获取值。所以我有这段代码（来自

import Ember from 'ember';
export default Ember.TextField.reopen({
  triggerEvents: function () {
    Ember.run.next(this, function () {
      this.$().trigger("change");
    });
  }.on("didInsertElement")
});



然后我将其导入 app.js

不知怎么的，还是不行。 didInsertElement 会被自动填充触发吗？我不知道。 

我使用 this.get('xxx') 来获取值。

如果你有更好的方法允许ember检测自动填充。我对此持开放态度。

Answer 1

只需为表单域添加观察者。示例：

// app/components/test-form.js
import Component from '@ember/component';
    export default Component.extend({
      isChanged: Ember.observer('login', 'password', function() {
        this.validate();
      }),
      validate() {
        let login = this.get('login');
        let password = this.get('password');
        console.log('validate', login, password);
      },
      actions: {
        submit() {
          console.log('submit');
        }
      }
    });


// app/templates/components/test-form.hbs
<form>
  <label>Login
  {{input type="text" value=login change='validate' }}
  </label>
  <label>Password
  {{input type="password" value=password change='validate' }}
  </label>
  <button {{action 'submit'}}>Click</button>
</form>

PS。仅在 Firefox 中测试。

如何使用 Ember 从表单中读取自动填充的 username/password

How to read auto-filled username/password from a form using Ember

javascript

ember.js

ember-cli

autofill