Elemen HTML mana yang dapat menerima fokus?


248

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.

Jawaban:


337

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.


2
Saya menemukan beberapa hasil menarik: jsfiddle.net/B7gn6 menunjukkan kepada saya bahwa attrib "tabindex" tidak cukup untuk bekerja di Chrome setidaknya ..
Jon z

19
Bahwa atribut tabindex "memungkinkan penulis untuk mengontrol apakah suatu elemen seharusnya dapat difokus" distandarisasi dalam HTML5: w3.org/TR/html5/... Pada dasarnya, nilai 0 membuat elemen menjadi fokus tetapi membiarkan pemesanannya ke browser. .
natevw

7
Semua elemen dengan element.isContentEditable === truefokus juga. Perhatikan bahwa IE -10 (11+?) Dapat memfokuskan elemen apa pun dengan blok tampilan atau tabel (div, span, dll.).
mems

14
Elemen dengan tabindex -1 dapat menerima fokus secara terprogram melalui metode fokus; tidak bisa ditabrak.
jessebeach

5
... kecuali tabindex -1, yang membuat fokus tidak mungkin >> tidak benar, jika tabindex -1, fokus dengan MENGKLIK adalah mungkin, tetapi fokus dengan menekan "tab" tidak mungkin. -1 membuat elemen menjadi fokus, hanya saja itu tidak ditambahkan dalam urutan tab. Lihat: jsfiddle.net/0jz0kd1a , pertama-tama coba klik elemen, lalu ubah tabindex ke 0 dan coba gunakan tab.
daremkd

37

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.


@TWiStErRob - pemilih Anda tidak menargetkan elemen yang sama dengan pemilih @ ReeCube, karena pemilih Anda tidak menyertakan elemen yang tidak memiliki tabindex yang ditetapkan secara eksplisit. Misalnya <a href="foo.html">Bar</a>tentu saja bisa fokus karena itu adalah aelemen yang memiliki hrefatribut. Tetapi pemilih Anda tidak memasukkannya.
jbyrd

@jbyrd itu hanya panggilan untuk mengedit berdasarkan pernyataan bobince: "... kecuali tabindex -1, yang membuat fokus tidak mungkin.", itu tidak pernah seharusnya menggantikan jawaban ReeCube; lihat riwayat edit.
TWiStErRob

SASS (atau CSS) adalah bentuk yang sesuai untuk memberikan jawaban yang ketat untuk pertanyaan di atas (kecuali inkonsistensi peramban).
Roy Tinker

tabindex="-1"tidak tidak membuat elemen unfocusable, itu hanya tidak dapat difokuskan oleh tabbing. Itu masih dapat menerima fokus dengan mengkliknya atau secara terprogram dengan HTMLElement.focus(); sama untuk nomor negatif lainnya. Lihat: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Lazzaro

Saya tidak akan mengecualikan item dengan tabindex-1. Pengguna tidak akan dapat fokus melalui perangkat input apa pun, tetapi Anda mungkin ingin secara terprogram mengatur dan menunjukkan fokus itu.
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])';

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.



Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.