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

<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

Cowherd

You haven't described what's happening when this code is executed. What exactly is the problem? – Raster

You did not say what problem you are having with the code that you came up with. – Animadvert

Answer 1

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

Lenard

sorry all, I didn't mean to send it just yet. The problem is that the blur works, the focus doesn't. – Cowherd

@Argo: That's because you are putting an illegal value in the background color style in the focus event handler. – Lenard

Answer 2

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

Asparagine

Answer 3

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;
}

Bosley

Answer 4

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

Stefaniastefanie

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. – Antichrist

thanks Neji . i do build js framwork for my job . Yesterday i has similar problem . when i see this page has first result my problem in google , i think but my solution here that other programmer that have similar problem ,can easy to get Solution . my problem is : can't change 'input:text' background color with jquery when run focus event . – Stefaniastefanie

Answer 5

in code there should be coma"," not colon ":"

the code must be $(this).css({'background-color' , '#FFFFEE'});

i hope it helps.

regards Saleha

Sensillum