使用 jquery 更改表单域背景颜色

Question

I have this small code and I am trying to change the background color of the field when I click on it to write, for example if I click in "email" field I want the field to turn yellow so it looks better. I searched but I don't know I couldnt find a soultion becuase I am not really familar with jquery.

<div class="content">
    <div class="row">
    <div class="left">First name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Last name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Email</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Password</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    </div>

jquery

$(document).ready(function()
   {
   $('.left, .content input, .content textarea, .content select').focus(function(){
   $(this).parents('.row').addClass("over");
   }).blur(function(){
   $(this).parents('.row').removeClass("over");
   });
   });

css

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .content{
    padding:10px;
    width:370px
    }
    .left{
    width:150px;
    float:left;
    padding:7px 0px 0px 7px;
    min-height:24px;
    }
    .right{
    width:200px;
    float:left;
    padding:5px;
    min-height:24px;
    }
    .clear{
    float:none;
    clear:both;
    height:0px;
    }
    .row{
    background-color:none;
    display:block;
    min-height:32px;
    }
    .text{
    width:190px;
    }
    .ruler{
    width:400px; border-bottom:dashed 1px #dcdcdc;
    }
    tr:focus{
    background-color:#fcfcf0;
    }
    td{
    vertical-align:top;
    }
    .over{
    background-color:#f0f0f0;
    }
    .out{
    background-color:none;
    }

Whoever can help me with the solution, thanks a lot.

Answer 1

You can get email type and add class based on that

JQuery

if( $(this).attr("type") == 'email' ){
    $(this).parents('.row').addClass("email");
}

CSS

.over.email{
    background-color:#FFFF00;
}

 $(document).ready(function(){ $('.left, .content input, .content textarea, .content select').focus(function(){ $(this).parents('.row').addClass("over"); if( $(this).attr("type") == 'email' ){ $(this).parents('.row').addClass("email"); } }).blur(function(){ $(this).parents('.row').removeClass("over"); if( $(this).attr("type") == 'email' ){ $(this).parents('.row').removeClass("email"); } }); });

 body{ font-family:Arial, Helvetica, sans-serif; font-size: 13px; }.content{ padding:10px; width:370px }.left{ width:150px; float:left; padding:7px 0px 0px 7px; min-height:24px; }.right{ width:200px; float:left; padding:5px; min-height:24px; }.clear{ float:none; clear:both; height:0px; }.row{ background-color:none; display:block; min-height:32px; }.text{ width:190px; }.ruler{ width:400px; border-bottom:dashed 1px #dcdcdc; } tr:focus{ background-color:#fcfcf0; } td{ vertical-align:top; }.over{ background-color:#f0f0f0; }.over.email{ background-color:#FFFF00; }.out{ background-color:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content"> <div class="row"> <div class="left">First name</div> <div class="right"><input name="Text1" type="text" class="text" /></div> <div class="clear"></div> </div> <div class="row"> <div class="left">Last name</div> <div class="right"><input name="Text1" type="text" class="text" /></div> <div class="clear"></div> </div> <div class="row"> <div class="left">Email</div> <div class="right"><input name="Text1" type="email" class="text" /></div> <div class="clear"></div> </div> <div class="row"> <div class="left">Password</div> <div class="right"><input name="Text1" type="text" class="text" /></div> <div class="clear"></div> </div> </div>

Answer 2

You've done it right, just change the CSS rule, like this for instance:

.over{
background-color:#ffff00;
}

Answer 3

You can bind an event handler to the "focus" for only the email input, for example:

$(document).ready(function () {
    $('[name=email]').focus(function () {
      $(this).parents('.row').addClass("over");
    }).blur(function () {
      $(this).parents('.row').removeClass("over");
    });
  });