Które elementy HTML mogą uzyskać fokus?

Szukam ostatecznej listy elementów HTML, które mogą się skupić, tzn. Które elementy zostaną nałożone, gdy focus()zostaną na nich wywołane?

Piszę rozszerzenie jQuery, które działa na elementach, na które można skupić uwagę. Mam nadzieję, że odpowiedź na to pytanie pozwoli mi sprecyzować elementy, na które celuję.

Nie ma określonej listy, to zależy od przeglądarki. Jedyny standard, jaki mamy, to HTML poziomu 2 DOM , zgodnie z którym jedynymi elementami, które mają focus()metodę, są HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement i HTMLAnchorElement. Pomija to w szczególności HTMLButtonElement i HTMLAreaElement.

Dzisiejsze przeglądarki definiują focus()HTMLElement, ale element faktycznie nie skupi się, chyba że jest jednym z:

• HTMLAnchorElement / HTMLAreaElement z href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, ale nie przy pomocy disabled(IE faktycznie daje błąd, jeśli spróbujesz), a przesyłanie plików ma nietypowe zachowanie ze względów bezpieczeństwa
• HTMLIFrameElement (chociaż skupienie go nie robi nic użytecznego). Inne elementy osadzania również, być może, nie przetestowałem ich wszystkich.
• Dowolny element z tabindex

Istnieją inne subtelne wyjątki i dodatki do tego zachowania w zależności od przeglądarki.

Tutaj mam selektor CSS w oparciu o bobince „s odpowiedzi , aby wybrać dowolną zmianę ostrości element 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 */
  }

lub trochę piękniej w 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 */
    }
}

Dodałem go jako odpowiedź, ponieważ tego właśnie szukałem, gdy Google przekierowało mnie do tego pytania Stackoverflow.

EDYCJA: Jest jeszcze jeden selektor, który można ustawić:

[contentEditable=true]

Jest to jednak stosowane bardzo rzadko.

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

Tworzę listę SCSS wszystkich elementów możliwych do aktywacji i pomyślałem, że to może komuś pomóc ze względu na pozycję Google w tym pytaniu.

Kilka rzeczy do zapamiętania:

• Zmieniłem :not([tabindex="-1"])na, :not([tabindex^="-"])ponieważ generowanie tego jest całkowicie prawdopodobne -2. Lepiej bezpiecznie niż przykro, prawda?
• Dodanie :not([tabindex^="-"])do wszystkich innych selektorów z możliwością ustawiania ostrości jest całkowicie bezcelowe. Podczas korzystania [tabindex]:not([tabindex^="-"])już zawiera wszystkie elementy, z którymi będziesz negować :not!
• Uwzględniłem, :not([disabled])ponieważ wyłączone elementy nigdy nie mogą być ustawiane. Ponownie więc nie ma sensu dodawać go do każdego elementu.

Biblioteka ułatwień dostępu ally.js zapewnia tutaj nieoficjalną listę opartą na testach:

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

(Uwaga: na ich stronie nie ma informacji o częstotliwości wykonywania testów).

Może ten może pomóc:

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

zwracana wartość: prawda = sukces, fałsz = niepowodzenie

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

Selektor: focus jest dozwolony na elementach, które akceptują zdarzenia z klawiatury lub inne dane wejściowe użytkownika.

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