Które elementy HTML mogą uzyskać fokus?


248

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ę.

Odpowiedzi:


337

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.


2
Znalazłem kilka interesujących wyników: jsfiddle.net/B7gn6 sugeruje mi, że atrybut „tabindex” nie wystarcza do pracy w Chrome przynajmniej ..
Jon z

19
To, że atrybut tabindex „pozwala autorom kontrolować, czy element ma być ustawiany” jest znormalizowany w HTML5: w3.org/TR/html5/… Zasadniczo wartość 0 powoduje, że element można ustawić, ale jego kolejność należy do przeglądarki .
natevw

7
Wszystkie elementy z element.isContentEditable === truesą również skupialne. Zauważ, że IE -10 (11+?) Może skupić dowolny element z blokiem wyświetlania lub tabelą (div, span itp.).
mems

14
Element o tabindeksie -1 może otrzymać fokus programowo poprzez metodę fokusa; po prostu nie można tego tabulować.
jessebeach

5
… Chyba że tabindex ma wartość -1, co uniemożliwia ustawianie ostrości >> nieprawda, jeśli tabindex ma wartość -1, ustawianie ostrości przez KLIKNIĘCIE jest możliwe, ale ustawianie ostrości przez naciśnięcie klawisza „tab” jest niemożliwe. -1 powoduje, że element można ustawić, tylko że nie jest dodawany w kolejności tabulacji. Zobacz: jsfiddle.net/0jz0kd1a , najpierw spróbuj kliknąć element, a następnie zmień tabindex na 0 i spróbuj użyć tab.
daremkd

37

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.


@TWiStErRob - twój selektor nie jest skierowany na te same elementy, co selektory @ ReeCube, ponieważ twój nie zawiera elementów, które nie mają jawnie ustawionego tabindexu. Na przykład z <a href="foo.html">Bar</a>pewnością można go ustawić, ponieważ jest to aelement posiadający hrefatrybut. Ale twój selektor go nie obejmuje.
jbyrd

@jbyrd było to po prostu wezwanie do edycji oparte na oświadczeniu bobince'a: „… chyba że tabindex ma wartość -1, co uniemożliwia skupienie.”, nigdy nie miało zastąpić odpowiedzi ReeCube; zobacz historię edycji.
TWiStErRob

SASS (lub CSS) jest odpowiednią formą, która zapewnia rygorystyczną odpowiedź na powyższe pytanie (z wyjątkiem niespójności przeglądarki).
Roy Tinker,

tabindex="-1"czy nie uczynić elementem unfocusable, to po prostu nie może być skupiona przez tabulatorem. Nadal może się skupiać, klikając go lub programowo za pomocą HTMLElement.focus(); to samo dla każdej innej liczby ujemnej. Zobacz: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Lazzaro

Nie wykluczałbym przedmiotów z tabindex-1. Użytkownicy nie będą mogli ustawić ostrości za pomocą żadnego urządzenia wejściowego, ale możesz chcieć ustawić programowo i nadal pokazywać to ustawienie.
James Westgate,

7
$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.



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.