CODEWITHSUNDEEP
jquerycsshtmlfocusblur
Morten Hagh
Morten Hagh

Reputation: 2113

Remove / add CSS class on input focus / blur

I have a form with some input fields and a little <div> to the right of each input with a little description. What I want is to enable a CSS class for each input's own <div> with it's own description.

I have made a working example here: http://jsfiddle.net/VL2FH/8/. This uses the <div> :hover state on the input's focus state.

What I want to ask is: Is there some sort of a "shortcut" so I don't have to make:

$('#submit_name').bind('blur', function(){
   $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc');
});
$('#submit_name').bind('focus', function(){
  $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover');
});
​

For each input field in the form.

Upvotes: 8

Views: 44868

Answers (4)

jussinen
jussinen

Reputation: 688

You can also achieve the same effect in CSS only by using the adjacent sibling selector + so that any .input-desc directly following a focused input will have the different rules applied:

input:focus + .input-desc {
    cursor: default;
    width: 265px;     
    -moz-box-shadow: 0px 2px 5px #aaaaaa;
    -webkit-box-shadow: 0px 2px 5px #aaaaaa;
    box-shadow: 0px 2px 5px #aaaaaa; 
    animation:desc 0.3s;
    -moz-animation:desc 0.3s; /* Firefox */
    -webkit-animation:desc 0.3s; /* Safari and Chrome */  
}

The adjacent sibling selector is support in modern browsers and Internet Explorer from version 8. ( http://reference.sitepoint.com/css/adjacentsiblingselector )

Here's a fiddle: http://jsfiddle.net/VL2FH/14/

Upvotes: 4

Hearaman
Hearaman

Reputation: 8726

Check this bellow example program

    <html>
        <head>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function()
                {

                    $('#submit_name').bind('blur', function()
                    {
                        $('#submit_name-desc').removeClass('cls1').addClass('cls2');
                    });

                    $('#submit_name').bind('focus', function()
                    {
                        $('#submit_name-desc').removeClass('cls2').addClass('cls1');
                    });
                });
            </script>

            <style>
                .cls1
                {
                    background-color: #ccc;                
                }

                .cls2
                {
                    background-color: #fff;
                }
                .submit_name-desc
                {
                    height: 30px;
                    border: 1px;
                }
            </style>
        </head>
        <body>
            <input type="text" id="submit_name" />
            <div id="submit_name-desc">
                Name Description
            </div>
        </body>
    </html>

Upvotes: 2

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

You can generalize the focus and blur callback like this

$('input').on('blur', function(){
   $(this).next('div').removeClass('input-desc-hover').addClass('input-desc');
}).on('focus', function(){
  $(this).next('div').removeClass('input-desc').addClass('input-desc-hover');
});

If your description divs are next to the input element, it will work fine.

And it's better to use .on() for event binding. ​

Demo: http://jsfiddle.net/joycse06/VL2FH/11/

Upvotes: 21

Miroslav Popovic
Miroslav Popovic

Reputation: 12128

Use classes instead of ids for selecting elements. If your input elements have submit-name class and your descriptions desc class, you could do it like this:

$('.submit-name').bind('blur', function(){
    $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc');
}).bind('focus', function(){
    $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover');
});

$("~ .desc", this).first() will select the first sibling of input element (this) with a class desc.

Here's an updated jsFiddle for that: http://jsfiddle.net/miroslav/VL2FH/13/

Edit

Joy's solution with $(this).next() is much better though.

Upvotes: 0

Related Questions