javascript - 在输入标签上使用 autofocus 属性时不会调用 onfocus

Question

在下面的示例中，我只得到一个警告框。我读到焦点放在执行 JavaScript 代码之前。有没有办法让它继续工作？

<input id="i" type="text" autofocus onfocus="alert(1)">

<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
    alert(2);
}, false);
</script>

(我只在 Safari 中测试过)

编辑:我显然可以这样做(Prototypejs 选择器):

var autofocusElement = $$('input[autofocus]')[0];
callListener(autofocusElement);

但与只添加一个事件监听器相比，它看起来很难看。

编辑:

不要担心浏览器不支持自动对焦属性。它很容易解决，就像我在下面的 fiddle 链接中所做的那样。正如我所见，还有解决问题的最佳方法。我的问题是我是否可以用比手动调用监听器更简单的方式来完成。

http://jsfiddle.net/tellnes/7TMBJ/3/

它在 Firefox 3.6 中工作正常，因为 Firefox 不支持自动对焦。但在支持自动对焦的 Safari 中，则不会调用该事件。

Answer 1

来自HTML5 working draft :

There must not be more than one element in the document with the autofocus attribute specified.

所以你无论如何都在要求未定义的行为。

只有一个 autofocus 元素，在 Firefox 3.6 下，这两个处理程序都不会在页面加载时被调用。手动将焦点赋予元素调用两个处理程序(然后进入无限循环，因为警告框在关闭时将焦点返回给元素)。

HTML5 草案确实说 autofocus 应该执行 focusing steps在页面加载上，包括引发 focus 事件，但浏览器目前可能没有以完整或一致的方式实现该功能。

您可能希望在页面加载期间显式调用您的 focus 事件处理程序，直到 HTML5 规范完成并且浏览器开始寻求全面支持。