スタッフのつぶやき

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

  • このエントリーをはてなブックマークに追加
【フォーム】入力し終えた入力欄の背景色を変える方法【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!

 

それではまた次回。

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

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ