【jQuery・JavaScript(イベントリスナーあり・なし)の3パターンで】検索フォームの入力欄などのinput要素にフォーカスした時、フォーカスを外した時にclassを追加するなど何かをする方法

Webサイトに検索用のフォームなどを設置することってよくあると思います。フォームには、下の画像のように入力欄や検索ボタンがありますよね。

この入力欄についてですが、

それぞれで「特定の要素にclass名を付与してスタイルを適用する」っていう作業をすることがありました。

今後も使えそうなことなので、以下にやり方をメモ書きました。

「似たようなことがしたいな～」という方はご参考ください。

前提があります

今回は、以下の3パターンで書きました。

どのパターンも共通で、入力欄をフォーカスした時(focus)はbody要素に「fixed」というclass名を付与しています。「fixed」は「背景を暗くして、スクロールさせなくする」スタイルが書かれています。

そしてフォーカスを外した時(blur)は「fixed」のclass名は削除される、という感じです。

というわけで、さっそく～。

まずはjQueryを使う方法です。

ここ最近までjQueryをメインで使っていろいろと実装していたので、多少はコードを書ける・・・ような気がする・・・

IE8に対応する必要がない場合は、イベントリスナーを使ってもいいと思います。

余談ですが、IE8は開発元のマイクロソフトのサポートが切れていますね。私個人的には、古いブラウザへの対応は「別途有償」にしています。

最後に、イベントリスナーなしパターンです。

ところで、最近はjQueryなどの「ライブラリを使わずに書いてよ！」という場面も多くなってきましたね。難しい・・・ライブラリの便利さがわかる・・・！

今回はシンプルな例を挙げましたが、応用すればいろんなことに使えそうですね。

「フォームの入力欄をフォーカスした時、外した時に何かをさせたい」という場合には、ご参考くださいますとうれしいです。