在下面的示例中，我只收到一个警报框。我读到焦点是在 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中，并没有调用该事件。
In the following example, I get only one alert box. I read that the focus is put before the JavaScript code is executed. Is there a way to get this to work on?
<input id="i" type="text" autofocus onfocus="alert(1)">
<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
alert(2);
}, false);
</script>
(I have only tested this in Safari)
Edit:
I can obviously do it this way (Prototypejs selector):
var autofocusElement = $('input[autofocus]')[0];
callListener(autofocusElement);
But it looks ugly compared to only add an event listener.
Edit:
Do not worry over a lack of browser support for the autofocus attribute. It solved easily as I have done in I fiddle links to below. There is also the best solution to the problem as I can see. My question is if I can do it in a less ugly than having to call the listener manually.
http://jsfiddle.net/tellnes/7TMBJ/3/
It works fine in Firefox 3.6 since Firefox does not support autofocus. But in Safari, which supports autofocus, are not the event called.
发布评论
评论（6）
来自 HTML5工作草案：
所以无论如何你都在要求未定义的行为。
在 Firefox 3.6 下，只有一个
autofocus元素，在页面加载时不会调用这两个处理程序。手动将焦点赋予元素会调用两个处理程序（然后进入无限循环，因为警告框在关闭时将焦点返回给元素）。HTML5 草案确实规定
autofocus应该执行 将步骤集中在页面加载上，包括引发focus事件，但浏览器当前可能没有以完整或一致的方式实现该功能。您可能希望在页面加载期间显式调用
focus事件处理程序，直到 HTML5 规范完成并且浏览器开始寻求完全支持。From the HTML5 working draft:
So you're asking for undefined behavior anyway.
With only one
autofocuselement, under Firefox 3.6, neither of the handlers get called on page load. Manually giving the focus to the element calls both handlers (then proceeds into an infinite loop, due to the alert boxes giving the focus back to the element when closing).The HTML5 draft does say that
autofocusshould perform the focusing steps on page load, including raising thefocusevent, but chances are that browsers are not currently implementing that feature in a complete or consistent manner.You might want to explicitly call your
focusevent handler during page load until the HTML5 spec is finished and browsers start aiming for complete support.当前示例中的以下代码：
将导致从
1到2[eidt]
的警报无限循环，因为：（这种情况仅发生在支持
1的浏览器中code>autofocus ）输入获取自动焦点，触发事件触发警报，警报获取焦点，单击确定，输入获取焦点，焦点事件触发新事件，现在触发两个不同的警报（DOM现已完全加载，因此添加了新事件与另一个警报），两个警报都抓住焦点，单击确定，单击确定，输入抓住焦点触发新事件触发现在两个不同的警报，警报抓住焦点，单击确定，下一个警报抓住焦点，单击确定，输入抓住焦点，触发两个事件，警报抓住焦点，单击确定，下一个警报抓住焦点，单击确定，输入抓住焦点，触发两个事件，警报抓住焦点，单击确定，下一个警报抓住焦点，单击确定，输入抓住焦点，触发两个事件，警报抓住焦点，单击确定，下一个警报抓住焦点，单击确定，输入抓住焦点，触发两个事件，输入抓住焦点，触发两个事件，警报抓住焦点，单击确定，下一个警报抓住焦点，单击确定，输入抓住焦点，激发两个事件，输入抓住焦点，触发两个事件，警报抓住焦点，单击“确定”，下一个警报抓住焦点，单击“确定”，输入抓住焦点，触发两个事件，输入抓住焦点，触发两个事件，警报抓住焦点，单击“确定”，下一个警报抓住焦点焦点，单击“确定”，输入获取焦点，触发两个事件...
无限过程 FTW 的文本描述！....？ ：P
[/edit]
在前面应用了两个自动对焦的示例中，最后一个自动对焦似乎将按照我在底部附加的示例中的方式执行。我还添加了一种根据类名向每个输入添加焦点事件的方法...不确定您是否正在寻找该方法，但尽管它可能会有所帮助。
JSFiddle onfocus 事件示例
The following code from your current example:
Is going to cause an infinite loop of alerts going from
1to2[eidt]
because: (this happens only in broswers that support
autofocus)input gets autofocus, fires event which fires an alert, alert grabs focus, click ok, input grabs focus, focus event fires new event triggering now two different alerts (DOM fully loaded now so new event is added with another alert), both alerts grab focus, click ok, click ok, input grabs focus fires new event triggering now two different alerts, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events...
Textual description of an infinite process FTW!....? :P
[/edit]
In your previous examples with two auto-focuses applied it seems that the last one will be executed as in the example I have attached at the bottom. I also added a way of adding a focus event to each input based on a class name... Not sure if you're looking for that but though it might be of some help.
JSFiddle Example of onfocus event
您需要为自动对焦指定一个值。
You need to give a value to autofocus.
<input id="i" type="text" onfocus="alert(1)" autofocus="">可能是在
addEventListener添加事件侦听器之前触发 autofocusonfocus事件。我在输入元素上将
autofocus替换为class="autofocus"，并在我的addEventListener调用附近设置焦点：It might be that the autofocus
onfocusevent fires beforeaddEventListeneradds the event listener.I replaced
autofocuswithclass="autofocus"on my input element, and set the focus like this near myaddEventListenercall:如果您需要为
input执行一段 javascript 代码onfocus，您可以使用 jQuery：http://api.jquery.com/focus/If you need to execute a piece of javascript code,
onfocusfor eitherinput, you could use jQuery: http://api.jquery.com/focus/