Ember中如何为动态生成的文本框设置焦点？jQuery方法无效求方案

嘿，我太懂你这种直接用jQuery操作DOM却没生效的郁闷了！Ember作为声明式框架，直接全局选DOM元素很容易踩坑——比如代码执行时目标输入框还没渲染到页面上，或者Ember的异步渲染队列还没跑完。下面给你几个适配Ember生态的靠谱方法，按场景选就行：

如果你的输入框是组件初始化后就存在的，用这个钩子准没错——它会在组件完全插入DOM之后触发，这时候操作DOM是安全的：

// 你的组件类文件
import Component from '@ember/component';

export default Component.extend({
  didInsertElement() {
    // 别忘了调用父类的钩子，这是Ember的规范
    this._super(...arguments);
    
    // 方法一：用Ember封装的jQuery选择器（只在组件内部查找，避免全局污染）
    this.$('.answer_1').focus();
    
    // 方法二：原生DOM API（更轻量，不用依赖jQuery）
    // this.element.querySelector('.answer_1').focus();
  }
});

如果你的输入框是通过{{each}}循环或者{{#if}}条件渲染出来的，didInsertElement可能只会触发一次，这时候用didRender更合适——它会在每次组件渲染完成后触发。不过记得加个判断，避免重复触发焦点：

import Component from '@ember/component';

export default Component.extend({
  didRender() {
    this._super(...arguments);
    const targetInput = this.element.querySelector('.answer_1');
    
    // 只有元素存在且当前没有焦点时才设置，防止重复触发
    if (targetInput && document.activeElement !== targetInput) {
      targetInput.focus();
    }
  }
});

如果你用的是Ember 3.16+的Octane版本，强烈推荐用修饰器来实现，既简洁又符合现代Ember的编程模式：
首先创建一个修饰器文件：

// app/modifiers/focus-on-render.js
import { modifier } from 'ember-modifier';

export default modifier(function focusOnRender(element) {
  // 修饰器会直接拿到目标DOM元素，直接调用focus即可
  element.focus();
});

然后在模板里直接给输入框加这个修饰器：

<input class="answer_1" {{focus-on-render}} />

这样输入框一渲染到DOM就会自动获取焦点，完全不用手动操作DOM！

如果不是页面加载时聚焦，而是某个用户动作（比如点击按钮）后才需要聚焦，就在组件的action里处理：

// 组件类
import Component from '@ember/component';
import { action } from '@ember/object';

export default Component.extend({
  @action
  focusAnswerInput() {
    const targetInput = this.element.querySelector('.answer_1');
    if (targetInput) {
      targetInput.focus();
    }
  }
});

模板里绑定动作：

<button {{on 'click' this.focusAnswerInput}}>聚焦第一个输入框</button>

大概率是你执行这段代码的时候，目标输入框还没被Ember渲染到DOM里——Ember的渲染是异步的，如果你在组件初始化阶段或者外部直接调用，DOM元素还不存在，自然没法设置焦点。用上面这些Ember原生的生命周期钩子或API，能确保DOM已经准备好再操作。

内容的提问来源于stack exchange，提问作者Dom