포커스를받을 수있는 HTML 요소는 무엇입니까?

포커스를 잡을 수있는 HTML 요소의 명확한 목록을 찾고 focus()있습니다.

초점을 맞출 수있는 요소에서 작동하는 jQuery 확장을 작성 중입니다. 이 질문에 대한 답변으로 내가 타겟팅하는 요소를 구체적으로 설명 할 수 있기를 바랍니다.

명확한 목록은 없으며 브라우저에 달려 있습니다. 우리가 가지고있는 유일한 표준은 DOM Level 2 HTML 이며, focus()메소드 를 가진 유일한 요소 는 HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement 및 HTMLAnchorElement입니다. HTMLButtonElement 및 HTMLAreaElement는 특히 생략됩니다.

오늘날의 브라우저 focus()는 HTMLElement를 정의 하지만 요소가 다음 중 하나가 아니면 실제로 초점을 맞추지 않습니다.

• href가있는 HTMLAnchorElement / HTMLAreaElement
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement disabled(단, IE는 실제로 시도하면 오류가 발생 함)이며 파일 업로드는 보안상의 이유로 비정상적인 동작을합니다
• HTMLIFrameElement (초점을 맞추는 데 유용한 기능은 없음) 다른 포함 요소도 테스트하지 않은 것 같습니다.
• 를 가진 모든 요소 tabindex

브라우저에 따라이 동작에 다른 미묘한 예외 및 추가 사항이있을 수 있습니다.

여기에 포커스 가능한 HTML 요소를 선택하는 bobince 의 답변 을 기반으로 CSS 선택기가 있습니다 .

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

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

Google 이이 Stackoverflow 질문으로 나를 리디렉션했을 때 찾고 있던 것이기 때문에 답변으로 추가했습니다.

편집 : 초점을 맞출 수있는 선택기가 하나 더 있습니다.

[contentEditable=true]

그러나 이것은 매우 드물게 사용됩니다.

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

집중 가능한 모든 요소의 SCSS 목록을 작성 중이며이 질문의 Google 순위로 인해 누군가에게 도움이 될 수 있다고 생각했습니다.

몇 가지 참고할 사항 :

• 어떻게 든 생성하는 것이 완벽하게 타당 :not([tabindex="-1"])하기 :not([tabindex^="-"])때문에로 변경 했습니다 -2. 미안보다 안전합니까?
• :not([tabindex^="-"])다른 모든 포커스 가능한 선택기에 추가 하는 것은 완전히 의미가 없습니다. [tabindex]:not([tabindex^="-"])그것을 사용 하면 이미 부정 할 모든 요소가 포함됩니다 :not!
• 나는 포함 :not([disabled])장애인 요소 수 있기 때문에 결코 포커스 수 없습니다. 다시 말하지만 모든 단일 요소에 추가하는 것은 쓸모가 없습니다.

ally.js의 접근성 라이브러리는 여기에 비공식 테스트 기반의 목록을 제공합니다 :

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

(NB : 그들의 페이지는 얼마나 자주 테스트를 수행했는지 말하지 않습니다.)

어쩌면 이것이 도움이 될 수 있습니다.

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

반환 값 : true = 성공, false = 실패

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

: focus 선택기는 키보드 이벤트 또는 다른 사용자 입력을 허용하는 요소에서 허용됩니다.

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