どのHTML要素がフォーカスを受け取ることができますか？

フォーカスを取ることが許可されているHTML要素の決定的なリストを探しています。つまり、focus()呼び出されたときにどの要素がフォーカスされるのですか？

私はフォーカスを当てることができる要素で動作するjQuery拡張機能を書いています。この質問の答えが、私が対象とする要素について具体的になることを願っています。

明確なリストはありません、それはブラウザ次第です。私たちが持っている唯一の標準はDOM Level 2 HTMLです。それによると、focus()メソッドを持つ唯一の要素はHTMLInputElement、HTMLSelectElement、HTMLTextAreaElementおよびHTMLAnchorElementです。これは特にHTMLButtonElementとHTMLAreaElementを省略します。

今日のブラウザはfocus()HTMLElementで定義していますが、次のいずれかでない限り、要素は実際にはフォーカスされません。

• HTMLAnchorElement / HTMLAreaElementとhref
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement with not with 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の質問にリダイレクトしたとき、それが私が探していたものだったので、それを答えとして追加しました。

編集：フォーカス可能なセレクタがもう1つあります：

[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

（注：彼らのページには、テストが実行された頻度は記載されていません。）

多分これは助けることができます：

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

戻り値：true =成功、false =失敗

Reff：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