哪些HTML元素可以获得焦点?

我正在寻找一个允许重点关注的HTML元素的明确列表,即当focus()被调用时,哪些元素将被放到焦点上?

我正在写一个jQuery扩展,它可以使元素集中在一起。 我希望这个问题的答案可以让我具体说明我的目标。

6 Solutions collect form web for “哪些HTML元素可以获得焦点?”

没有一个确定的列表,取决于浏览器。 我们唯一的标准是DOM 2级HTML ,根据这个标准,唯一具有focus()方法的元素是HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement和HTMLAnchorElement。 这明显地省略了HTMLButtonElement和HTMLAreaElement。

今天的浏览器在HTMLElement上定义了focus() ,但是一个元素实际上并不需要关注,除非它是以下之一:

  • 带有href的HTMLAnchorElement / HTMLAreaElement
  • HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement但不禁用(如果您尝试,IE实际上会给您一个错误),并且file upload出于安全原因有exception行为
  • HTMLIFrameElement(虽然集中它没有做任何有用的)。 其他embedded元素,也许,我没有testing过他们。
  • 任何带有tabindex元素

…除非tabindex-1 ,这使得焦点不可能。

根据浏览器的不同,很可能会有其他细微的例外和增加。

在这里,我有一个CSSselect器基于bobince的答案select任何可聚焦的HTML元素:

  a[href]:not([tabindex='-1']), area[href]:not([tabindex='-1']), input:not([disabled]):not([tabindex='-1']), select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']), iframe:not([tabindex='-1']), [tabindex]:not([tabindex='-1']), [contentEditable=true]:not([tabindex='-1']) { /* your CSS for focusable elements goes here */ } 

或者在SASS中更漂亮一些:

 a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, [tabindex], [contentEditable=true] { &:not([tabindex='-1']) { /* your SCSS for focusable elements goes here */ } } 

我已经添加了它作为答案,因为那是当我redirect到这个Stackoverflow问题时,我正在寻找什么。

编辑:还有一个select器,这是可调焦的:

 [contentEditable=true] 

但是,这很less使用。

ally.js辅助function库提供了非官方的,基于testing的列表:

https://allyjs.io/data-tables/focusable.html

(注意:他们的页面没有说明testing执行的频率。)

 $focusable: 'a[href]', 'area[href]', 'button', 'details', 'input', 'iframe', 'select', 'textarea', // these are actually case sensitive but i'm not listing out all the possible variants '[contentEditable=""]', '[contentEditable="true"]', '[contentEditable="TRUE"]', '[tabindex]:not([tabindex^="-"])', ':not([disabled])'; 

我正在创build一个SCSS的所有关注元素列表,我认为这可能有助于某人由于这个问题的谷歌排名。

有几件事要注意:

  • 我改变了:not([tabindex="-1"]):not([tabindex^="-"])因为以某种方式生成-2是完全合理的。 最好安全比对不起吧?
  • 添加:not([tabindex^="-"])所有其他可调焦select器是完全没有意义的。 当使用[tabindex]:not([tabindex^="-"])它已经包含了所有你将会否定的元素:not
  • 我包括:not([disabled])因为禁用的元素永远不能被聚焦。 所以再次将它添加到每一个元素是没有用的。

button,checkbox,file upload,图层,密码,收音机,重置,select,提交,文本,Textarea,窗口

焦点select器允许接受键盘事件或其他用户input的元素。

http://www.w3schools.com/cssref/sel_focus.asp

  • 如何在Flexbox中垂直alignment文本?
  • VIM可以突出显示匹配的HTML标签,如Notepad ++?
  • 从纵向到横向旋转时,iPad的布局会扩大
  • 如何在div(Facebook风格)上创build自定义滚动条
  • 如何并排放置div
  • 检测在网页中使用哪种字体
  • 如何在HTML文本下添加一个虚线下划线
  • 我可以使用mailto设置电子邮件的主题/内容:?
  • 可以嵌套在P元素中的HTML5元素列表?
  • 居中水平和垂直DIV
  • 什么是DOM级别?