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

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

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

HTMLのautofocus属性を使う

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

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

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

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

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

HTML

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

HTML

JavaScript



Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント