Які елементи HTML можуть отримати фокус?

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

Я пишу розширення jQuery, яке працює на елементах, які можна привести у фокус. Я сподіваюся, що відповідь на це питання дозволить мені бути конкретним щодо елементів, на які я орієнтований.

Немає певного списку, це залежить від браузера. Єдиний стандарт, який ми маємо, - це DOM HTML рівня 2 , згідно з яким єдиними елементами, які мають focus()метод, є HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement і HTMLAnchorElement. Це, зокрема, не містить HTMLButtonElement та HTMLAreaElement.

Сьогоднішні браузери визначають focus()HTMLElement, але елемент насправді не зосередиться, якщо це не один із:

• HTMLAnchorElement / HTMLAreaElement з href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, але не з disabled(IE насправді дає помилку при спробі), і завантаження файлів має незвичну поведінку з міркувань безпеки.
• HTMLIFrameElement (хоча фокусування не робить нічого корисного). Інші елементи вбудовування також, можливо, я не перевірив їх усіх.
• Будь-який елемент із a 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.

EDIT: Є ще один перемикач, який фокусується:

[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

(Примітка. На їхній сторінці не вказано, як часто проводилися тести.)

Можливо, це може допомогти:

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

Селектор фокусування: дозволений для елементів, які приймають події клавіатури або інші введення користувача.

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