Hangi HTML öğeleri odak alabilir?

Odaklanmasına izin verilen HTML öğelerinin kesin bir listesini arıyorum, yani bunlara focus()çağrıldığında hangi öğeler odaklanacaktır ?

Odaklanabilecek öğeler üzerinde çalışan bir jQuery uzantısı yazıyorum. Umarım bu sorunun cevabı hedeflediğim öğeler hakkında spesifik olmamı sağlayacaktır.

Kesin bir liste yok, tarayıcıya bağlı. Sahip olduğumuz tek standart DOM Level 2focus() HTML'dir, buna göre yöntemi olan tek eleman HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement ve HTMLAnchorElement'dir. Bu, HTMLButtonElement ve HTMLAreaElement öğelerini özellikle atlar.

Bugünün tarayıcıları focus()HTMLElement üzerinde tanımlanıyor, ancak bir öğe aşağıdakilerden biri olmadıkça aslında odaklanmayacak:

• Bir href ile HTMLAnchorElement / HTMLAreaElement
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement ile birlikte değil ancak disabled(IE denerseniz aslında size bir hata verir) ve dosya yüklemelerinin güvenlik nedeniyle olağandışı davranışları vardır
• HTMLIFrameElement (odaklanmak yararlı bir şey yapmaz). Diğer gömme elemanları da, belki hepsini test etmedim.
• Herhangi bir öğeye sahip tabindex

Tarayıcıya bağlı olarak bu davranışa başka ince istisnalar ve eklemeler olması muhtemeldir.

Burada CSS-seçici dayalı olması bobince 'ın cevabı herhangi odaklanabilir HTML öğesi seçmek için:

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

ya da SASS'ta biraz daha güzel:

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

Bunu bir cevap olarak ekledim, çünkü Google beni bu Stackoverflow sorusuna yönlendirdiğinde aradığım şey buydu.

EDIT: Odaklanabilen bir tane daha seçici var:

[contentEditable=true]

Ancak, bu çok nadiren kullanılır.

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

Tüm odaklanabilir öğelerin bir SCSS listesini oluşturuyorum ve bunun bu sorunun Google sıralaması nedeniyle birisine yardımcı olabileceğini düşündüm.

Unutulmaması gereken birkaç nokta:

• Değiştim :not([tabindex="-1"])için :not([tabindex^="-"])onu üretmek için mükemmel derecede mantıklı çünkü -2nasılsa. Üzgün ​​olmaktan daha güvenli.
• :not([tabindex^="-"])Diğer tüm odaklanabilir seçicilere eklemek tamamen anlamsızdır. Kullanırken [tabindex]:not([tabindex^="-"])zaten reddettiğiniz tüm öğeleri içerir :not!
• Dahil ettim :not([disabled])çünkü engelli öğeler asla odaklanamaz. Bu yüzden, yine her bir öğeye eklemek işe yaramaz.

Ally.js erişilebilirlik kütüphanesi burada resmi olmayan bir test tabanlı listesini sağlar:

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

(Not: Sayfaları testlerin ne sıklıkta yapıldığını söylemiyor.)

Belki bu yardımcı olabilir:

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

dönüş değeri: true = başarı, yanlış = başarısız

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

: Odak seçicisine klavye olaylarını veya diğer kullanıcı girişlerini kabul eden öğelerde izin verilir.

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