JavaScriptでフォームに自動フォーカスする方法

JavaScriptでフォームに自動的にフォーカスする方法

自動的にフォーカスさせる方法（オートフォーカス）はいくつかありますが、一番問題が発生しないオートフォーカスさせる方法を紹介します。

HTMLのautofocus属性を使う

HTML5では、すべてのフォームコントロールにautofocus属性が導入されています。しかし、ブラウザによってはautofocus属性をサポートしていない場合があります。もしブラウザがautofocus属性をサポートしていない場合、JavaScriptでautofocusさせる必要があります。

JavaScriptで特定の要素がautofocus属性をサポートしているか確かめる

JavaScriptで特定の要素が要素がautofocus属性をサポートしているか確かめるには以下のコードで行います。

functiton supports_autofocus() {
    var i = document.createElement('input');
    return 'autofocus' in i;
}

JavaScriptでオートフォーカスさせる

オートフォーカスしたい<input>タグの直下に<script>タグを挿入すればオートフォーカスさせることができます。

HTML

<body>
    <form>
        <input type="text" id="target" autofocus />
        <script>document.getElementById("target").focus()</script>
        <input type="submit" />
    </form>
</body>

上記のことを踏まえ、オートフォーカスさせるためには、HTML５のautofocus属性を使い、もし開いているユーザーのブラウザがそれをサポートしていない場合、JavaScriptでオートフォーカスさせるという手法をとります。
コードは以下のようになります。

HTML

<body>
    <form>
        <input type="text" id="target" autofocus />
        <script>if (!supports_autofocus()) {document.getElementById("target").focus()};</script>
        <input type="submit" />
    </form>
</body>

JavaScript

functiton supports_autofocus() {
    var i = document.createElement('input');
    return 'autofocus' in i;
}

投稿日: 2016/04/25
カテゴリ: Web制作