HTML5 自动对焦不适用于生成的视图答案

【问题标题】：HTML5 autofocus not working on generated viewHTML5 自动对焦不适用于生成的视图
【发布时间】：2014-08-11 17:30:13
【问题描述】：

我在我的 web 应用程序中使用 EmberJS，当我创建新记录（在编辑模式下设置）时，我的第一个字段（输入文本）设置了 autofocus="autofocus" 参数。它第一次在 Chrome 上运行没有问题，但之后就不行了。

页面加载一次，因为它是一个 Ember 应用程序，并且在我创建新记录时正在重新生成视图（记录视图）。

知道如何解决这个问题吗？

编辑：我已经删除了 autofocus 属性，并且只尝试像https://stackoverflow.com/a/14763643 中那样使用 Jquery focus()

App.FocusedTextField = Em.TextField.extend({
    didInsertElement: function() {
        this.$().focus();
    }
});

现在，即使是第一次也没有焦点。另外，如果我尝试用this.$().hide(); 替换this.$().focus();，那么输入将被隐藏。控制台中的this.$() 也显示正确的输入，但focus() 不起作用！

【问题讨论】：

是的 autofocus 根据错误报告不适用于动态 DOM：bugzilla.mozilla.org/show_bug.cgi?id=662496 你必须依赖 .focus() 方法。
由于 autofocus 是在页面加载时完成的，我想您将不得不依靠脚本来手动设置焦点。
那我会使用 Jquery focus() 函数，谢谢分享！

【解决方案1】：

我会考虑将您的输入移动到视图或组件中，然后在 didInsertElement 函数中执行类似 this.$().focus(); 的操作。

【讨论】：

这个我试过了，还是不行。和stackoverflow.com/a/14763643一样，到处添加日志（并且成功调用了didInsertElement函数），但是第一次之后就没有焦点了。
更新了帖子，没有autofocus，只有jquery focus()，我的文本字段甚至没有一次自动对焦。我通过函数didInsertElement tho

【解决方案2】：

我遇到了与自动对焦完全相同的问题，但 .focus() 函数确实对我有用。这是我的编码方式：

html:

<input type="text" id="idTextbox"/>

javascript：

$('#idTextbox').focus();

【讨论】：