如何使用 Ember 从表单中读取自动填写的用户名/密码

Posted 2023-02-24

【中文标题】如何使用 Ember 从表单中读取自动填写的用户名/密码

【英文标题】：How to read auto-filled username/password from a form using Ember

【发布时间】：2017-12-05 07:09:37

【问题描述】：

现在我有一个有两个输入的表单：用户名和密码。如果我手动输入它们，我的验证功能可以获取这些值。但是，如果这些值是由 broswer 的自动填充功能填充的。由于未触发任何事件，Ember 无法获取该值。 所以我有这个代码（来自https://***.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 检测自动填充。我对此持开放态度。

【参考方案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 中测试。

【讨论】：

嗨，我没有表单的组件，但我有一个控制器。我在控制器中测试了您的代码，但它不起作用。我必须使用组件吗？

同样的方法也适用于控制器，不需要组件