jquery background-color change on focus and blur

Question

I have the following problem  I have a form with three text input fields  and I want to change the background-color when one of the fields has focus  and get it set back when it loses focus  I have come up with the following code   HTML  simplified     lt form gt   lt input class  calc input  type  text  name  start date  id  start date    gt   lt input class  calc input  type  text  name  end date  id  end date    gt   lt input class  calc input  size  8  type  text  name  leap year  id  leap year    gt   lt  form gt    jQuery    document  ready function            input text   focus      function              this  css   background-color      FFFFEEE                     input text   blur      function              this  css   background-color      DFD8D1                   Thanks

User · Answer

What you are trying to do can be simplified down to this.

_x000D_

$('input:text').bind('focus blur', function() {_x000D_
    $(this).toggleClass('red');_x000D_
});

_x000D_

input{_x000D_
    background:#FFFFEE;_x000D_
}_x000D_
.red{_x000D_
    background-color:red;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
_x000D_
<form>_x000D_
    <input class="calc_input" type="text" name="start_date" id="start_date" />_x000D_
    <input class="calc_input" type="text" name="end_date" id="end_date" />_x000D_
    <input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />_x000D_
</form>

_x000D_

User · Answer

FFFFEEE is not a correct color code  Try with  FFFFEE instead

User · Answer

Tested Code      input   css  background   red      Complete      input text   focus function            this  css    background    Black              input text   blur function            this  css    background    red            Tested in version   jquery-1 9 1 js  jquery-ui-1 10 3 js

User · Answer

in code there should be coma    not colon      the code must be    this  css   background-color      FFFFEE      i hope it helps   regards Saleha

User · Answer

Even easier  just CSS can resolve the problem   input type  text    input type  password    textarea  select        width  200px      border  1px solid      border-color   C0C0C0  E4E4E4  E4E4E4  C0C0C0      background   FFF      padding  8px 5px      font  16px Arial  Tahoma  Helvetica  sans-serif      -moz-box-shadow  0 0 5px  C0C0C0      -moz-border-radius  5px      -webkit-box-shadow  0 0 5px  C0C0C0      -webkit-border-radius  5px      box-shadow  0 0 5px  C0C0C0      border-radius  5px    input type  text   focus  input type  password   focus  textarea focus  select focus        border-color   B6D5F7  B6D5F7  B6D5F7  B6D5F7      outline  none      -moz-box-shadow  0 0 10px  B6D5F7      -webkit-box-shadow  0 0 10px  B6D5F7      box-shadow  0 0 10px  B6D5F7

[jquery] jquery background-color change on focus and blur

Examples related to jquery

Examples related to input

Examples related to background-color