哪些 HTML 元素可以接收焦点?

本文介绍了哪些 HTML 元素可以接收焦点?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在寻找允许获得焦点的 HTML 元素的明确列表，即当对它们调用 focus() 时哪些元素将被置于焦点?

I'm looking for a definitive list of HTML elements which are allowed to take focus, i.e. which elements will be put into focus when focus() is called on them?

我正在编写一个 jQuery 扩展，它可以处理可以成为焦点的元素.我希望这个问题的答案能让我具体说明我的目标元素.

I'm writing a jQuery extension which works on elements that can be brought into focus. I hope the answer to this question will allow me to be specific about the elements I target.

推荐答案

没有明确的列表，这取决于浏览器.我们唯一的标准是DOM Level 2 HTML，唯一具有 focus() 方法的元素是HTMLInputElement、HTMLSelectElement、HTMLTextAreaElement 和 HTMLAnchorElement.这明显省略了 HTMLButtonElement 和 HTMLAreaElement.

There isn't a definite list, it's up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus() method are HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. This notably omits HTMLButtonElement and HTMLAreaElement.

今天的浏览器在 HTMLElement 上定义了 focus()，但一个元素实际上不会获得焦点，除非它是以下之一:

Today's browsers define focus() on HTMLElement, but an element won't actually take focus unless it's one of:

• 带有 href 的 HTMLAnchorElement/HTMLAreaElement
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement 但没有disabled(如果你尝试，IE 实际上会给你一个错误)，并且出于安全原因，文件上传有异常行为
• HTMLIFrameElement(虽然聚焦它并没有做任何有用的事情).其他嵌入元素也可能，我还没有全部测试过.
• 任何带有 tabindex
的元素

• HTMLAnchorElement/HTMLAreaElement with an href
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with disabled (IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons
• HTMLIFrameElement (though focusing it doesn't do anything useful). Other embedding elements also, maybe, I haven't tested them all.
• Any element with a tabindex

根据浏览器的不同，此行为可能会有其他微妙的例外和补充.

There are likely to be other subtle exceptions and additions to this behaviour depending on browser.