タブのスクロールパネルのブラウザの違い


キーtabはアクセス可能性において重要な役割を果たし、次のフォーカス可能要素に焦点を合わせさせ、現在のスクリーンの外に焦点を得る要素があれば、ブラウザスクロール(すなわちトリガscrollイベント)を引き起こすが、先にフォーカス要素を獲得するfocusイベントをトリガするか、またはscrollをトリガするか、ieは標準ブラウザと異なる.
 
シーン:
 
<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を区別できません.