タブのスクロールパネルのブラウザの違い
3834 ワード
キーtabはアクセス可能性において重要な役割を果たし、次のフォーカス可能要素に焦点を合わせさせ、現在のスクリーンの外に焦点を得る要素があれば、ブラウザスクロール(すなわちトリガscrollイベント)を引き起こすが、先にフォーカス要素を獲得するfocusイベントをトリガするか、またはscrollをトリガするか、ieは標準ブラウザと異なる.
シーン:
このページを開いて空白の領域をクリックして、tabボタンを押すと、afterがフォーカスを得て画面をスクロールさせます.
デモ
違い:
e 6,7,8
トリガー順序は以下の通りです
tab-> scroll->focus
まずスクリーンを転がしてから元素に焦点を合わせます.
ie 9、firefox、chrome
トリガー順序は
tab->focus->scroll
標準:
ie 9は全部ie 6、7、8と違っているなら、基準は
tab->focus->scroll
まずフォーカスを取ってスクリーンに転がりますが、具体的な仕様は不明です.
ps:
tabIndexが−1に設定されている場合、この要素は、仕様に応じて一定の焦点を得ることができ、テーブ順序フォーカス機構によっては選択できない.
しかし、ie 6では、この要素は依然としてtabによって選択されている.
tabIndexを0に設定すれば、この要素は必ず焦点を得ることができ、焦点順序とその要素はdomノードの順序に対応する(全く同じではない).
ps 2:javascriptを使ってtabIndexを操作します.
tabindexを設定するかどうかを判断する:
elem設定のtabindexを読みだします.
tabindexを設定:
tabindexはhtml属性に属するので、最終的にはhtmlを生成します.
セットメイトをセットするのと同じ効果ですが、セットトップをそのまま使うと面倒くさいですがあります.
tabindex属性をクリア:
二つとも書きます.後の一つは主にie 6,7のためです.ie 6,7はcontent valueとdom valueを区別できません.
シーン:
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id='after' href='#'>after</a>
このページを開いて空白の領域をクリックして、tabボタンを押すと、afterがフォーカスを得て画面をスクロールさせます.
デモ
違い:
e 6,7,8
トリガー順序は以下の通りです
tab-> scroll->focus
まずスクリーンを転がしてから元素に焦点を合わせます.
ie 9、firefox、chrome
トリガー順序は
tab->focus->scroll
標準:
ie 9は全部ie 6、7、8と違っているなら、基準は
tab->focus->scroll
まずフォーカスを取ってスクリーンに転がりますが、具体的な仕様は不明です.
ps:
tabIndexが−1に設定されている場合、この要素は、仕様に応じて一定の焦点を得ることができ、テーブ順序フォーカス機構によっては選択できない.
しかし、ie 6では、この要素は依然としてtabによって選択されている.
tabIndexを0に設定すれば、この要素は必ず焦点を得ることができ、焦点順序とその要素はdomノードの順序に対応する(全く同じではない).
ps 2:javascriptを使ってtabIndexを操作します.
tabindexを設定するかどうかを判断する:
var attr = elem.getAttributeNode("tabindex");
return attr ? attr.specified : false;
elem設定のtabindexを読みだします.
return elem.tabIndex;
tabindexを設定:
elem.tabIndex=1;
tabindexはhtml属性に属するので、最終的にはhtmlを生成します.
<x tabindex='1' ></x>
セットメイトをセットするのと同じ効果ですが、セットトップをそのまま使うと面倒くさいですがあります.
tabindex属性をクリア:
element.removeAttribute("tabindex");
element.removeAttribute("tabIndex");
二つとも書きます.後の一つは主にie 6,7のためです.ie 6,7はcontent valueとdom valueを区別できません.