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);

但与仅添加事件监听器相比，它看起来很丑陋。

编辑：

不要担心自动对焦属性缺乏浏览器支持。它很容易解决，就像我在下面的链接中所做的那样。我可以看到，这个问题也是最好的解决方案。我的问题是，如果我能够做得比不必手动调用监听器那么难看。

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

它在Firefox 3.6中运行正常，因为Firefox不支持自动对焦。但是在支持自动对焦的Safari中，并不是所谓的事件。

Answer 1

来自HTML5 working draft：

一定不能超过一个文件中的元素指定了autofocus属性。

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

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

HTML5草案确实说autofocus应该在页面加载时执行focusing steps，包括提升focus事件，但很可能浏览器当前没有在完整版中实现该功能或一致的方式。

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

Answer 2

您当前示例中的以下代码：

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

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

会导致从1到2

的无限循环警报

[eidt]

因为:(这只发生在支持autofocus）

的broswers中

输入获取自动聚焦，触发事件触发警报，警报抓取焦点，单击确定，输入抓取焦点，焦点事件触发新事件现在触发两个不同的警报（现在DOM已满载，因此新事件添加了另一个警报），两个警报抓住焦点，单击确定，单击确定，输入抓取焦点触发新事件现在触发两个不同的警报，警报抓取焦点，单击确定，下一个警报抓取焦点，单击确定，输入抓取焦点，触发两个事件，警报抓取焦点，单击确定，下一个警报抓取焦点，单击确定，输入抓取焦点，触发两个事件，警报抓取焦点，单击确定，下一个警报抓取焦点，单击确定，输入抓取焦点，触发两个事件，警报抓取焦点，单击确定，下一步警报抓取焦点，单击确定，输入抓取焦点，触发两个事件，输入抓取焦点，触发两个事件，警报抓取焦点，单击确定，下一个警报抓取焦点，单击确定，输入抓取焦点，触发两个事件，输入抓取焦点，触发两个事件，警报抓取焦点，单击确定，下一个警报抓取焦点，单击确定，输入抓取焦点，触发两个事件，输入抓取焦点，触发两个事件，警报抓取焦点，单击确定，下一个警报抓取焦点，单击确定，输入抓取焦点，触发两个事件......

无限过程FTW的文字描述！....？：P

[/编辑]

在之前的应用了两个自动对焦的示例中，似乎最后一个将按照我在底部附加的示例执行。我还添加了一种基于类名向每个输入添加焦点事件的方法......不确定你是否正在寻找它，但它可能会有所帮助。

JSFiddle Example of onfocus event

Answer 3

您需要为自动对焦赋值。
<input id="i" type="text" onfocus="alert(1)" autofocus="">

Answer 4

在将所有事件都赋予输入字段之后，赋予autofoucs =“ autofocus”属性。
您还可以在顶部的.js文件中使用addEventListener。

Answer 5

如果您需要为onfocus执行一段javascript代码input，则可以使用jQuery：http://api.jquery.com/focus/

在输入标记上使用autofocus属性时，不会调用onfocus

5 个答案: