Elemen HTML mana yang dapat menerima fokus?

Saya mencari daftar elemen HTML yang pasti yang diizinkan untuk mengambil fokus, yaitu elemen mana yang akan dimasukkan ke dalam fokus ketika focus()dipanggil?

Saya sedang menulis ekstensi jQuery yang berfungsi pada elemen yang dapat dijadikan fokus. Saya berharap jawaban untuk pertanyaan ini akan memungkinkan saya untuk lebih spesifik tentang elemen yang saya targetkan.

Tidak ada daftar pasti, terserah browser. Satu-satunya standar yang kami miliki adalah DOM Level 2 HTML , yang menurutnya satu-satunya elemen yang memiliki focus()metode adalah HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, dan HTMLAnchorElement. Ini terutama menghilangkan HTMLButtonElement dan HTMLAreaElement.

Browser hari ini menentukan focus()HTMLElement, tetapi sebuah elemen tidak akan benar-benar fokus kecuali salah satu dari:

• HTMLAnchorElement / HTMLAreaElement dengan href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement tetapi tidak dengan disabled(IE benar-benar memberi Anda kesalahan jika Anda mencoba), dan unggahan file memiliki perilaku yang tidak biasa untuk alasan keamanan
• HTMLIFrameElement (meskipun memfokuskannya tidak ada gunanya). Elemen penyematan lainnya juga, mungkin, saya belum menguji semuanya.
• Elemen apa pun dengan a tabindex

Mungkin ada pengecualian dan penambahan halus lainnya untuk perilaku ini tergantung pada browser.

Di sini saya memiliki CSS-pemilih berdasarkan bobince 's jawaban untuk memilih elemen HTML focusable:

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

atau sedikit lebih indah di 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 */
    }
}

Saya telah menambahkannya sebagai jawaban, karena itulah, apa yang saya cari, ketika Google mengarahkan saya ke pertanyaan Stackoverflow ini.

EDIT: Ada satu pemilih lagi, yang dapat difokuskan:

[contentEditable=true]

Namun, ini sangat jarang digunakan.

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

Saya membuat daftar SCSS dari semua elemen yang dapat fokus dan saya pikir ini mungkin membantu seseorang karena peringkat Google pertanyaan ini.

Beberapa hal yang perlu diperhatikan:

• Saya berubah :not([tabindex="-1"])menjadi :not([tabindex^="-"])karena sangat masuk akal untuk menghasilkan -2entah bagaimana. Lebih baik aman daripada menyesal bukan?
• Menambahkan :not([tabindex^="-"])ke semua penyeleksi yang dapat fokus lainnya sama sekali tidak ada gunanya. Saat menggunakannya [tabindex]:not([tabindex^="-"])sudah termasuk semua elemen yang akan Anda tolak :not!
• Saya termasuk di dalamnya :not([disabled])karena elemen yang dinonaktifkan tidak akan pernah bisa fokus. Jadi sekali lagi tidak berguna untuk menambahkannya ke setiap elemen.

The ally.js perpustakaan aksesibilitas memberikan daftar resmi, berdasarkan uji-sini:

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

(NB: Halaman mereka tidak mengatakan seberapa sering tes dilakukan.)

Mungkin yang ini bisa membantu:

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

nilai balik: true = sukses, false = gagal

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

Pemilih: fokus diizinkan pada elemen yang menerima acara keyboard atau input pengguna lainnya.

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