画面表示時に入力項目にフォーカスする方法(まとめ)

【目的】
jQuery3で、画面表示時に入力項目にフォーカスされるように試みたいと思います。



【試行１】
まずは、普通に一番最初の『input』タグにフォーカスされるようにしてみました。

『画面表示時に入力項目にフォーカスする方法』



【試行２】
次に、『input』タグの『hidden』がある場合や、『input』タグのstyleに『display:none』がある項目はフォーカスできないので飛ばすようにしてみました。

『画面表示時に入力項目にフォーカスする方法(hidden・display:none対応)』



【試行３】
次に、一番最初が『select』タグでもフォーカスされるようにしてみました。

『画面表示時に入力項目にフォーカスする方法(select対応)』



【試行４】
次に、一番最初が『textarea』タグでもフォーカスされるようにしてみました。

『画面表示時に入力項目にフォーカスする方法(textarea対応)』



【試行５】
次に、一番最初が『button』タグでもフォーカスされるようにしてみました。

『画面表示時に入力項目にフォーカスする方法(button対応)』



【試行６】
最後に、フォーカスしたくない項目がある場合、classに『skip-init-focus』を指定して飛ばすようにしてみました。

『画面表示時に入力項目にフォーカスする方法(フォーカスしたくない項目対応)』



静的にHTMLを作成する場合は必要ないかもしれないですが、動的にHTML出力する場合に必要な場合に参考にしてみて下さい。




以上です。