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

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

よくある検索フォームの入力欄と検索ボタン

inputfocusbluraddcss00

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

  • 入力欄をクリック(または タップ)して「フォーカスした時」
  • 「フォーカスを外した時」

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

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

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

前提があります

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

  • jQuery
  • JavaScript(イベントリスナーあり)
  • JavaScript(イベントリスナーなし)

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

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

featuredinputfocusbluraddcss

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

jQueryを使う

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

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

JavaScriptを使う(イベントリスナーあり)

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

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

JavaScriptを使う(イベントリスナーなし)

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

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

まとめ

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

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

著者:bouya Imamura