Quali elementi HTML possono ricevere il focus?

Sto cercando un elenco definitivo di elementi HTML che possono essere messi a fuoco, ovvero quali elementi verranno messi a fuoco quando focus()viene chiamato su di essi?

Sto scrivendo un'estensione jQuery che funziona su elementi che possono essere messi a fuoco. Spero che la risposta a questa domanda mi permetta di essere specifico sugli elementi a cui mi rivolgo.

Non esiste un elenco definito, dipende dal browser. L'unico standard che abbiamo è DOM Level 2 HTML , secondo il quale gli unici elementi che hanno un focus()metodo sono HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement e HTMLAnchorElement. Ciò omette in particolare HTMLButtonElement e HTMLAreaElement.

I browser di oggi definiscono focus()HTMLElement, ma un elemento in realtà non si focalizzerà a meno che non sia uno di:

• HTMLAnchorElement / HTMLAreaElement con un href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement ma non con disabled(IE in realtà ti dà un errore se ci provi) e i caricamenti di file hanno un comportamento insolito per motivi di sicurezza
• HTMLIFrameElement (anche se focalizzarlo non fa nulla di utile). Anche altri elementi di incorporamento, forse, non li ho testati tutti.
• Qualsiasi elemento con a tabindex

Probabilmente ci saranno altre sottili eccezioni e aggiunte a questo comportamento a seconda del browser.

Qui ho un CSS selettore sulla base di bobince 's risposta per selezionare qualsiasi elemento HTML attivabile:

  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 */
  }

o un po 'più bello in 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 */
    }
}

L'ho aggiunto come risposta, perché era quello che stavo cercando, quando Google mi ha reindirizzato a questa domanda StackOverflow.

EDIT: c'è un altro selettore, che è focalizzabile:

[contentEditable=true]

Tuttavia, questo è usato molto raramente.

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

Sto creando un elenco SCSS di tutti gli elementi focalizzabili e ho pensato che questo potesse aiutare qualcuno a causa del ranking di Google di questa domanda.

Alcune cose da notare:

• Ho cambiato :not([tabindex="-1"])per :not([tabindex^="-"])perché è perfettamente plausibile per generare -2in qualche modo. Meglio prevenire che curare, vero?
• L'aggiunta :not([tabindex^="-"])a tutti gli altri selettori focalizzabili è completamente inutile. Quando lo usi [tabindex]:not([tabindex^="-"])include già tutti gli elementi con cui dovresti negare :not!
• Ho incluso :not([disabled])perché gli elementi disabilitati non possono mai essere focalizzabili. Quindi di nuovo è inutile aggiungerlo a ogni singolo elemento.

La libreria di accessibilità ally.js fornisce un elenco non ufficiale basato su test qui:

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

(NB: la loro pagina non indica la frequenza con cui sono stati eseguiti i test.)

Forse questo può aiutare:

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

valore restituito: vero = successo, falso = errore

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

Il selettore: focus è consentito su elementi che accettano eventi da tastiera o altri input dell'utente.

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