上昇ブログ

people for the living

cssで入力必須項目の背景色を変える、入力必須項目を伝えるを簡単に実装する

cssで入力必須項目の背景色を変える、入力必須項目を伝える

をシンプルに実装する。

以下のコードを書くと、Webサイトから申込みの際によくある、 入力必須を伝える、入力必須項目を入力したら色背景をやめる を簡単に実装できる。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./jquery-2.2.1.min.js"></script>
<script type="text/javascript">
<!-- 入力必須 -->
$(function(){
   $('.required').on('keydown keyup keypress change focus blur', function(){
       if($(this).val() == ''){
           $(this).css({backgroundColor:'#ffcccc'});
       } else {
           $(this).css({backgroundColor:'#fff'});
       }
   }).change();
});
</script>
<style>
</style>
</head>
<body>
<dl>
<dt>名前 *入力必須</dt>
<dd><input type="text" value="" name="name" class="required"></dd>
</dl>
<dl>
<dt>内容 *入力必須</dt>
<dd><textarea value="" name="text" class="required"></textarea></dd>
</dl>
<dl>
<dt>備考 ※入力必須項目でない、class指定しない</dt>
<dd><input type="text" value="" name="tel"></dd>
</dl>
</body>
</html>
</html>




作りながら学ぶjQueryデザインの教科書

jqueryでデザイン操作は、これで勉強しました。
書かれているコードがシンプルでわかりやすい。