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

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

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

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

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

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

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

前提があります

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

• jQuery
• JavaScript（イベントリスナーあり）
• JavaScript（イベントリスナーなし）

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

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

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

jQueryを使う

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

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

JavaScriptを使う（イベントリスナーあり）

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

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

JavaScriptを使う（イベントリスナーなし）

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

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

まとめ

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

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