Những yếu tố HTML nào có thể nhận được trọng tâm?

Tôi đang tìm kiếm một danh sách chính xác các yếu tố HTML được phép tập trung, tức là yếu tố nào sẽ được đặt vào trọng tâm khi focus()được gọi vào chúng?

Tôi đang viết một phần mở rộng jQuery hoạt động trên các phần tử có thể được tập trung. Tôi hy vọng câu trả lời cho câu hỏi này sẽ cho phép tôi được cụ thể về các yếu tố tôi nhắm mục tiêu.

Không có một danh sách xác định, nó tùy thuộc vào trình duyệt. Tiêu chuẩn duy nhất chúng tôi có là HTML Cấp 2 DOM , theo đó các yếu tố duy nhất có focus()phương thức là HTMLInputEuity, HTMLSelectEuity, HTMLTextAreaEuity và HTMLAnchorEuity. Điều này đáng chú ý bỏ qua HTMLButtonEuity và HTMLAreaEuity.

Các trình duyệt ngày nay xác định focus()trên HTMLEuity, nhưng một yếu tố sẽ không thực sự tập trung trừ khi đó là một trong:

• HTMLAnchorEuity / HTMLAreaE bổ sung với an href
• HTMLInputEuity / HTMLSelectEuity / HTMLTextAreaEuity / HTMLButtonEuity nhưng không phải với disabled(IE thực sự gây ra lỗi cho bạn nếu bạn thử) và tải lên tệp có hành vi bất thường vì lý do bảo mật
• HTMLIFrameE bổ sung (mặc dù tập trung nó không làm gì hữu ích). Các yếu tố nhúng khác cũng có thể, tôi đã không kiểm tra tất cả.
• Bất kỳ yếu tố nào với một tabindex

Có thể có những ngoại lệ và bổ sung tinh tế khác cho hành vi này tùy thuộc vào trình duyệt.

Ở đây tôi có bộ chọn CSS dựa trên câu trả lời của bobince để chọn bất kỳ phần tử HTML có thể tập trung nào:

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

hoặc đẹp hơn một chút trong 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 */
    }
}

Tôi đã thêm nó dưới dạng câu trả lời, bởi vì đó là, điều tôi đang tìm kiếm, khi Google chuyển hướng tôi đến câu hỏi Stackoverflow này.

EDIT: Có thêm một bộ chọn, có thể lấy nét:

[contentEditable=true]

Tuy nhiên, điều này được sử dụng rất hiếm khi.

$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ôi đang tạo một danh sách SCSS gồm tất cả các yếu tố có thể tập trung và tôi nghĩ rằng điều này có thể giúp ích cho ai đó do xếp hạng Google của câu hỏi này.

Một số điều cần lưu ý:

• Tôi đã thay đổi :not([tabindex="-1"])đến :not([tabindex^="-"])bởi vì nó hoàn toàn đáng tin cậy để tạo ra -2bằng cách nào đó. An toàn tốt hơn xin lỗi phải không?
• Thêm :not([tabindex^="-"])vào tất cả các bộ chọn tập trung khác là hoàn toàn vô nghĩa. Khi sử dụng [tabindex]:not([tabindex^="-"])nó đã bao gồm tất cả các yếu tố mà bạn đang phủ nhận :not!
• Tôi bao gồm :not([disabled])bởi vì các yếu tố khuyết tật không bao giờ có thể được tập trung. Vì vậy, một lần nữa thật vô ích khi thêm nó vào từng yếu tố.

Các ally.js thư viện khả năng tiếp cận cung cấp một, danh sách kiểm tra dựa trên không chính thức ở đây:

https://allyjs.io/data-tables/f Focusable.html

(NB: Trang của họ không cho biết tần suất thực hiện các bài kiểm tra.)

Có lẽ điều này có thể giúp:

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

giá trị trả về: true = thành công, false = thất bại

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeEuity https://developer.mozilla.org/en-US/docs/Web/API/HTMLEuity/f Focus

Bộ chọn tiêu điểm: được phép trên các thành phần chấp nhận các sự kiện bàn phím hoặc các đầu vào người dùng khác.

http://www.w3schools.com/cssref/sel_f Focus.asp