Które elementy HTML mogą otrzymać fokus?

Szukam definitywnej listy elementów HTML, które mogą się skupić, tzn. które elementy zostaną umieszczone w centrum uwagi, gdy zostanie wywołane focus()?

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

 205
htmlfocus
Author: isherwood, 2009-10-21
Source

6 answers

Nie ma określonej listy, to zależy od przeglądarki. Jedynym standardem jest DOM Level 2 HTML , zgodnie z którym jedynymi elementami posiadającymi metodę focus() są HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement i HTMLAnchorElement. To w szczególności pomija HTMLButtonElement i HTMLAreaElement.

Dzisiejsze przeglądarki definiują focus() Na HTMLElement, ale element nie będzie się skupiał, chyba że będzie jednym z:

  • HTMLAnchorElement / HTMLAreaElement with an href
  • HTMLInputElement / HTMLSelectElement/HTMLTextAreaElement / HTMLButtonElement, ale nie z disabled (IE rzeczywiście daje błąd, jeśli spróbujesz), a przesyłane pliki mają nietypowe zachowanie ze względów bezpieczeństwa
  • HTMLIFrameElement (choć skupienie nie robi nic użytecznego). Inne elementy osadzające również, być może, nie testowałem ich wszystkich.
  • dowolny element z tabindex

Mogą istnieć inne subtelne wyjątki i Dodatki do tego zachowania w zależności od przeglądarki.

 289
Author: bobince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-20 11:07:51

Tutaj mam selektor CSS oparty na bobince ' s odpowiedź aby wybrać dowolny 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 */
  }

Albo 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 to jako odpowiedź, bo właśnie tego szukałem, gdy Google przekierowało mnie na to pytanie Stackoverflow.

EDIT: jest jeszcze jeden selektor, który można skupić: 

[contentEditable=true]
Jest to jednak bardzo rzadko stosowane.
 28
Author: ReeCube,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:33

/ align = "left" / biblioteka dostępności JS zawiera nieoficjalną, testową listę tutaj:

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

(NB: ich strona nie mówi, jak często testy były wykonywane.)

 4
Author: ling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-24 20:59:48 
$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 możliwych do skupienia elementów i pomyślałem, że może to komuś pomóc ze względu na to pytanie w Google rank.

Kilka rzeczy do zapamiętania:

  • zmieniłem :not([tabindex="-1"]) na :not([tabindex^="-"]), ponieważ jest całkowicie prawdopodobne, aby wygenerować -2 w jakiś sposób. Lepiej być bezpiecznym niż żałować, prawda?
  • dodawanie :not([tabindex^="-"]) do wszystkich pozostałych selektorów fokusowalnych jest całkowicie bezcelowe. Gdy używasz [tabindex]:not([tabindex^="-"]), zawiera już wszystkie elementy, które negujesz :not!
  • I włączone :not([disabled]), ponieważ wyłączone elementy mogą nigdy nie być skupione. Więc znowu nie ma sensu dodawać go do każdego elementu.
 2
Author: Dustin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-04 19:08:34

Może ten pomoże: 

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

Return value: true = success, false = failed

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

 1
Author: Yohannes Kristiawan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-08 12:38:36

Selektor: focus jest dozwolony dla elementów, które akceptują zdarzenia klawiatury lub inne wejścia użytkownika.

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

 -2
Author: Barreto Freekhealer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-09 18:42:46