Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery background-color change on focus and blur

Tags:

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):

<form> <input class="calc_input" type="text" name="start_date" id="start_date" /> <input class="calc_input" type="text" name="end_date" id="end_date" /> <input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" /> </form> 

jQuery

$(document).ready(function() {     $('input:text').focus(     function(){         $(this).css({'background-color' : '#FFFFEEE'});     });      $('input:text').blur(     function(){         $(this).css({'background-color' : '#DFD8D1'});     }); }); 

Thanks

like image 902
Argoron Avatar asked Mar 22 '11 21:03

Argoron


People also ask

How can set background color in jQuery?

To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to check the present value of the property for the selected element.

How does focus work in jQuery?

jQuery focus() Method The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it). The focus() method triggers the focus event, or attaches a function to run when a focus event occurs. Tip: This method is often used together with the blur() method.

How do I change the background color of a text box in CSS?

To add background color to the form input, use the background-color property.

How Stop focus in jQuery?

In jQuery by using blur() property we can remove focus from input textbox field.


1 Answers

#FFFFEEE is not a correct color code. Try with #FFFFEE instead.

like image 126
Guffa Avatar answered Oct 08 '22 01:10

Guffa