7

在以下示例中，我只收到一个警告框。我读到重点放在 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);

但与仅添加事件侦听器相比，它看起来很难看。

编辑：

不用担心浏览器不支持 autofocus 属性。它很容易解决，就像我在下面的链接中所做的那样。如我所见，还有解决问题的最佳方法。我的问题是，我是否可以比手动调用监听器更丑。

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

它在 Firefox 3.6 中运行良好，因为 Firefox 不支持自动对焦。但在支持自动对焦的 Safari 中，并没有调用该事件。

4

5 回答 5

5

来自HTML5 工作草案：

autofocus文档中具有指定属性的元素不得超过一个 。

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

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

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

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

于 2010-12-05T19:01:33.003 回答
0

当前示例中的以下代码：

<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

[开斋节]

因为：（这只发生在支持的浏览器中autofocus）

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

无限进程FTW的文字描述！....？:P

[/编辑]

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

JSFiddle onfocus 事件示例

于 2010-12-05T19:24:56.233 回答
0

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

于 2018-01-30T09:44:21.527 回答
0
  1. 在将所有事件都赋予输入字段后，赋予 autofoucs="autofocus" 属性。
  2. 您还可以在顶部的 .js 文件中使用 addEventListener。
于 2020-02-13T09:12:27.843 回答
-1

如果您需要执行一段 javascript 代码，onfocus对于任何一个input，您都可以使用 jQuery：http ://api.jquery.com/focus/

于 2010-12-05T19:08:51.097 回答