フォーカスを許可されるHTML要素の最終的なリスト、つまり、focus()
が呼び出されたときにどの要素がフォーカスされるかを探していますか?
私は焦点を合わせることができる要素で動作するjQuery拡張機能を書いています。この質問に対する答えが、私がターゲットとする要素について具体的になることを願っています。
明確なリストはありません。ブラウザ次第です。唯一の標準は DOM Level 2 HTML であり、focus()
メソッドを持つ要素はHTMLInputElement、HTMLSelectElement、HTMLTextAreaElement、HTMLAnchorElementのみです。これにより、HTMLButtonElementとHTMLAreaElementが特に省略されます。
現在のブラウザはHTMLElementでfocus()
を定義していますが、要素は次のいずれかでない限り実際にはフォーカスを取得しません:
disabled
を使用せず(試行すると実際にエラーが表示されます)、ファイルのアップロードはセキュリティ上の理由で異常な動作をしますtabindex
を持つ要素ブラウザによっては、この動作に他の微妙な例外や追加がある可能性があります。
ここに 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]
ただし、これはほとんど使用されません。
ally.js アクセシビリティライブラリは、ここに非公式のテストベースのリストを提供します。
https://allyjs.io/data-tables/focusable.html
(注:彼らのページには、テストが実行された頻度は記載されていません。)
$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
で無効にするすべての要素がすでに含まれています。:not([disabled])
を含めました。したがって、すべての単一要素に追加することは無意味です。たぶんこれは助けることができます:
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