Question

现在我有一个有两个输入的表单：用户名和密码。如果我手动输入它们，我的验证功能可以获取值。但是，如果值由broswer的自动填充功能填充。由于没有事件被触发，Ember无法获得该值。所以我有这个代码（来自https://stackoverflow.com/questions/22324473/browser-autofill-databinding）：

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从表单中读取自动填充的用户名/密码

1 个答案: