【フォーム】入力し終えた入力欄の背景色を変える方法【jQuery】

こんにちは！ワタナベです。

先日早いですがライブ納めしてきました。今年はコロナもあり全然行けなかったのが悔しいですね…
来年は少しでも状況がよくなることを祈るのみです…

今回はフォームで入力し終えた入力欄の背景色を変える方法をご紹介いたします！

まず、HTMLがこうだとします。

<input type=”text” name=”form” class=”form-bg“>

class（もしくはid）を設定します。

そして各自のやり方でjQueryを読み込みます。

フォームの背景を変えるコードがコチラ↓↓↓↓↓

<script>
jQuery(“.form-bg“).on(‘keydown keyup keypress change focus blur’, function() {
if (jQuery(this).val() == ”) {
jQuery(this).css({
backgroundColor: ‘#ffebeb‘ /* 未入力時の背景色 */
});
} else {
jQuery(this).css({
backgroundColor: ‘#fff‘ /* 入力済みの背景色 */
});
}
}).change();
</script>

これで完了です(‘ω’)ノ

jQueryで制御を行うのでWPの「Contactform 7」でも「MW WP Form」でも関係なく使える方法です。

必須項目に背景をつけて、入力されたら背景を消すという事ができます。
入力しなければならない場所が明確になって、入力し終えたらリアルタイムで色が変わるのでわかりやすいですね！

▼THANKS！

 0017  3 users

jQueryの.on()で使えるイベントの種類と記述例 | 0017

https://0017.org/971.html

jQueryを使う時に.on()``を使うことが当たり前になっています。``.click``や``.hoverなどの単体機能よりカスタマイズしやすい事がその理由です。で、.on()にはイベントが沢山ありますので、そのイベントをまとめておこうと思います。2018.8更新アクセスが多かったの...

それではまた次回。

ご閲覧ありがとうございました！