Какие элементы HTML могут получать фокус?

Я ищу окончательный список элементов HTML, которым разрешено сфокусироваться, т.е. какие элементы будут вставляться в фокус, когда на них вызывается focus()?

Я пишу расширение jQuery, которое работает с элементами, которые могут быть сфокусированы. Я надеюсь, что ответ на этот вопрос позволит мне быть конкретным в отношении элементов, на которые я нацелен.

Ответ 1

Нет определенного списка, это зависит от браузера. Единственный стандарт, который у нас есть, это DOM Level 2 HTML, согласно которому единственными элементами, которые имеют метод focus() являются HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement и HTMLAnchorElement. Это заметно исключает HTMLButtonElement и HTMLAreaElement.

Сегодня браузеры определяют focus() на HTMLElement, но элемент фактически не фокусируется, если только один из них:

HTMLAnchorElement/HTMLAreaElement с href
HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement, но не с disabled (IE действительно дает вам ошибку, если вы пытаетесь), а загрузка файлов имеет необычное поведение по соображениям безопасности
HTMLIFrameElement (хотя фокусировка на него не делает ничего полезного). Другие элементы внедрения также, возможно, я не тестировал их все.
Любой элемент с tabindex

Вероятнее всего, будут другие тонкие исключения и дополнения к этому поведению в зависимости от браузера.

Ответ 2

Здесь у меня есть CSS-селектор, основанный на bobince answer, чтобы выбрать любые фокусируемые Элемент 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 */
    }
}

Я добавил его в качестве ответа, потому что это было то, что я искал, когда Google перенаправил меня на этот вопрос Stackoverflow.

РЕДАКТИРОВАТЬ: Есть еще один селектор, который можно сфокусировать:

[contentEditable=true]

Однако это используется очень редко.

Ответ 3

Библиотека доступности ally.js предоставляет неофициальный список, основанный на тестах:

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

(NB: на их странице не указано, как часто выполнялись тесты.)

Ответ 4

$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])';

Я создаю список SCSS всех настраиваемых элементов, и я подумал, что это может помочь кому-то из-за этого вопроса в ранге Google.

Несколько замечаний:

Я изменил :not([tabindex="-1"]) на :not([tabindex^="-"]), потому что совершенно правдоподобно генерировать -2 как-то. Лучше безопасно, чем сожалеть?
Добавление :not([tabindex^="-"]) ко всем другим настраиваемым селекторам совершенно бессмысленно. При использовании [tabindex]:not([tabindex^="-"]) он уже включает в себя все элементы, которые вы бы отрицали с помощью :not!
Я включил :not([disabled]), потому что отключенные элементы никогда не могут быть сфокусированы. Поэтому снова бесполезно добавлять его к каждому элементу.

Ответ 5

Может быть, это может помочь:

function focus(el){
	el.focus();
	return el==document.activeElement;
}

Ответ 6

Кнопка, флажок, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

Ответ 7

Селектор фокусировки разрешен для элементов, которые принимают события клавиатуры или другие пользовательские входы.

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