web-dev-qa-db-ja.com

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

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

私は焦点を合わせることができる要素で動作するjQuery拡張機能を書いています。この質問に対する答えが、私がターゲットとする要素について具体的になることを願っています。

htmlfocus
231
Paul Turner

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

現在のブラウザはHTMLElementでfocus()を定義していますが、要素は次のいずれかでない限り実際にはフォーカスを取得しません：

  • Href付きのHTMLAnchorElement/HTMLAreaElement
  • HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElementでdisabledを使用せず（試行すると実際にエラーが表示されます）、ファイルのアップロードはセキュリティ上の理由で異常な動作をします
  • HTMLIFrameElement（焦点を合わせても有用なことは何もありません）。他の埋め込み要素も、おそらくすべてをテストしたわけではありません。
  • tabindexを持つ要素

ブラウザによっては、この動作に他の微妙な例外や追加がある可能性があります。

314
bobince

ここに bobince の answer に基づくCSSセレクターがあり、フォーカス可能なHTML要素を選択します。

  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の質問にリダイレクトしてくれたときに探していたものだったので、答えとして追加しました。

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

[contentEditable=true]

ただし、これはほとんど使用されません。

31
ReeCube

ally.js アクセシビリティライブラリは、ここに非公式のテストベースのリストを提供します。

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

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

7
ling
$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ランクにより、これが誰かを助けるかもしれないと思いました。

注意すべきいくつかの点：

  • -2を生成することは完全に妥当であるため、:not([tabindex="-1"])を:not([tabindex^="-"])に変更しました。後悔するよりも安全ですか？
  • :not([tabindex^="-"])を他のすべてのフォーカス可能なセレクターに追加することは完全に無意味です。 [tabindex]:not([tabindex^="-"])を使用する場合、:notで無効にするすべての要素がすでに含まれています。
  • 無効な要素はneverフォーカス可能になるため、:not([disabled])を含めました。したがって、すべての単一要素に追加することは無意味です。
4
Dustin

たぶんこれは助けることができます：

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

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

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

0
Yohannes Kristiawan