以下のサンプルhtmlについて、input id="focus_target" にオートフォーカスさせる場合を考えます。
htmlサンプル
<body> <form> <input type="text" id="focus_target" /> <input type="submit" /> </form> <!-- 膨大なコンテンツ --> <!-- 省略 --> <!-- 膨大なコンテンツ --> </body>
方法1. window のロードを待ってからfocus()メソッドを呼び出す
まず思いつく方法として、windowのロードが完了してから、要素のfocus()メソッドを呼び出す方法があります。
window.onload = function(){
var target = document.getElementById("focus_target");
target.focus();
}ただしこの方法だと、ページのロード中にユーザーが別の入力フィールドフォーカスを移動させた場合、わざわざjavascriptが最初のフィールドにフォーカスが戻してしまうという、困った問題が発生する可能性があります。なので、この方法はなるべく避けたいところです。
代替案としては、jQueryが使えるなら、
$(document).ready($("#focus_target").focus());のようにdocumentのロード完了時にfocusすれば、ページ内のテキストがすべてロードされた時点でフォーカスが実行されますが、やはりサイズの大きなページや、遅いネットワークから接続している場合は、同じ問題が発生する可能性があります。方法2.input要素の直下に<script>タグを挿入
上記の問題を回避する方法としては、自動フォーカスしたい<input>タグの直下に<script>タグを挿入する方法があります。<body>
<form>
<input type="text" id="focus_target" />
<script>document.getElementById("focus_target").focus()</script>
<input type="submit" />
</form>
</body>input要素がロードされた直後にfocus()を呼び出しているため、方法1. の問題は回避できます。方法3.html5のautofoucs属性を適用する
HTML5では、すべてのフォームコントロールにautofocus属性が導入されました。<input type="text" id="focus_target" autofocus />html5のautofocusは単なるマークアップなので、すべてのブラウザで振る舞いが統一されます。ちなみにautofocus属性をサポートしていないブラウザは、単純にこれを無視するだけです。
以下の関数で,要素がautofocus属性を持っているか検証できます。
functiton supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}まとめ
フォームの入力フィールドにオートフォーカスさせたい場合は、、
1. まずはhtml5のautofocus属性を設定しておき、autofocusをサポートしていない場合のみ、focus()を呼び出す
<body>
<form>
<input type="text" id="focus_target" autofocus />
<script>
if (!supports_input_autofocus()) {document.getElementById("focus_target").focus()};
</script>
<input type="submit" />
</form>
</body>2. window の load が完了するのを待ってからfocus() するのはなるべく避ける
参考文献：入門 HTML5
入門 HTML5
0 件のコメント:
コメントを投稿