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

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

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

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

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

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

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

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

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

$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])потому что отключенные элементы никогда не могут быть фокусируемыми. Опять же, бесполезно добавлять его к каждому элементу.

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

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

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

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

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

возвращаемое значение: true = успех, false = сбой

Рефф: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

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

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