找出是什么使一个元素获得焦点

Question

有没有办法找出是什么导致第一个HTML元素（input、textarea）获得焦点？

我正在加载模态窗口，但似乎找不到JS代码行，它将focus()强制应用于这个第一个元素。

一种解决方法是在加载模态窗口后立即blur()它，但我想知道是什么触发了这个焦点。也许是嵌入在textarea中的内联事件监听器？

谢谢您的帮助！

- Guillermo

---

那个工具可能会有所帮助：http://www.sprymedia.co.uk/article/Visual+Event - Johnny5

我发现这更像是浏览器的一个特性，而不是代码中的问题。 - Teemu

你使用哪段代码来加载“模态窗口”？ - Uooo

@w4rumy 我正在使用jqModal，但它没有自动聚焦 - 在其他地方我都没有遇到过这个问题。 - Guillermo

@Guillermo “但它没有自动对焦” - 我以为输入会获得焦点，而你想避免这种情况？我理解错了吗？ - Uooo

@w4rumy 不，你说得对。 我的意思是 jqModal，并不会导致模态框中第一个字段自动获取焦点。 对于造成的混淆我感到抱歉。 - Guillermo

Answer 1

你可以使用元素的onFocus事件来分析返回的事件对象。

//using jquery 1.8 style binding with 'on'
$('#myelement').on('focus', function( e ){
  console.log( e ); // <--- e is passed to the anonymous function
});

这段代码中的e是传递给事件处理程序的Event对象的实例。

请查看jQuery文档，了解Event Object，特别是查看event.target doc。

目标属性可以是注册事件的元素或其后代。

---

注意：有多种方法可以设置元素的焦点，而不需要任何JavaScript调用。

例如，在html 5中，您可以使用autofocus定义文档的默认焦点

一些浏览器甚至会将默认焦点设置到文档上的第一个输入元素，或者使用其他许多HTML属性。

Javascript可能不是您幻影焦点的原因。

- qodeninja

---

你也可以使用console.trace()代替...这将为您提供回溯。 - lostsource

@qodeninja 谢谢您的回复！奇怪的是，如果我从<button onclick="load_modal(..)" ../>调用加载模态窗口的函数，第一个输入/文本区域会获得焦点，但如果我直接从控制台调用load_modal()，第一个字段将不会自动选择。 我尝试了跟踪(@lostsource)和记录事件，但我看不到是什么触发了对该字段的focus()事件。 所有测试都在FF18和Chrome 24中进行。 - Guillermo

为什么不在你的问题中分享更多的代码呢？你使用按钮标签意味着你正在使用HTML5。这可能是一个提示。如果你能告诉我们你正在使用哪些库或框架，那也会有所帮助。 - qodeninja

@qodeninja 我之前不知道<button>是HTML5的一部分，我尝试在其他地方（<div>）设置onclick属性，但结果都一样（即使定义了tabindex），第一个字段仍然会聚焦。所以为了不再浪费更多时间，我采取的解决方案是在我的文本区域之前添加一个不可见的输入框（<div style="visibility:hidden"><input type="text" size="1"></div>）。还是谢谢你的帮助 :) - Guillermo