IEにおけるtabindexの挙動について

現在取り掛かっているWebアプリケーション開発の途中、ブラウザ上の動作を確認していた時にIEのtabindexの挙動が気になったので、メモとして残しておきます。

まずは以下のリンクからサンプルページを開いてみてください。ちなみにJavaScriptが有効だと新ウィンドウ(タブ)で開きます。

サンプルページのHTMLは以下の通りとなっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabindex 挙動確認ページ@UCWD-Studio.</title>
<link rel="stylesheet" type="text/css" href="/css/notebook.css" />
<script type="text/javascript" src="https://ucwd.jp/wp-includes/js/jquery/jquery.js"></script>
<style>
ol { line-height: 150%; }
input:focus { background: #ffc; }
</style>
</head>
<body>
<h1>tabindex 挙動確認ページ</h1>
<form action="#" method="get">
<ol>

    <li><label>tabindex="50" <input type="text" id="col01" name="col01" value="" tabindex="50" /></label></li>
    <li><label>tabindex="40" <input type="text" id="col02" name="col02" value=""  tabindex="40"/></label></li>
    <li><label>tabindex="30" <input type="text" id="col03" name="col03" value="" tabindex="30" /></label></li>
    <li><label>tabindex="20" <input type="text" id="col04" name="col04" value="" tabindex="20" /></label></li>
    <li><label>tabindex="10" <input type="text" id="col05" name="col05" value="" tabindex="10" /></label></li>
</form>
</body>
</html>

で、ページが表示されたらマウスでどこかをクリックするとかせず、まずtabキーを押してみてください。もしサンプルページを開いたブラウザがIEの場合はアドレスバーとかナビゲーションボタンがフォーカスされるはずです。

サンプルページではtabindexの最小値が10なので、それが原因なのかと思って、それぞれ 1,2,3… ともしてみても結果は変わりません。ちなみにF5キーでリロードした際は一回目のtabキー押下でtabindex=”10″の入力欄がフォーカスされます。

この挙動、気になるようでしたらonloadのタイミングで

$( function () {
    $("html").focus();
});

といった感じ(jQueryを利用してる場合)でJavaScriptを利用してhtml要素にフォーカスを当てるようにするとIEでも他のブラウザと同様の挙動することが可能です。