Menu
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
902
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.
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.
To add background color to the form input, use the background-color property.
In jQuery by using blur() property we can remove focus from input textbox field.
#FFFFEEE is not a correct color code. Try with #FFFFEE instead.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
