Highlight Related Label when Input in Focus

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

Comments

asheep

# March 5, 2012

pleasee give me this example :(

jamie paterson

# March 29, 2012

This will come in handy, will use a subtle rgba colour background on selection – cheers :-)

JohnMotyJr

# March 17, 2013

I ran a test case with this because i was doing this the long way. Come to find out, if you happen to already know the labels for="" and input’s id, then a switch case is quicker.

$('form :input').bind({
    focus: function () {
        var id = $(this).attr('id').toString();
        var add = $("label[for='" + this.id + "']").addClass('labelfocus');
        switch (id) {
            case 'title':add;break;
            case 'description':add;break;
            case 'resource':add;break;
            case 'tag':add;break;
            case 'theme':add;break;
            case 'language':add;break;
        }
    },
    blur: function () {
        $('label').removeClass('labelfocus');
    }
});

jsPerf Benchmark Test Case (Slightly modified with triggering events). I do however prefer this method due to the less code and easy to use, especially if you have dynamic forms.

David Tintner

# December 13, 2013

You can style it with just CSS if you put the label after the input

<input id="something-cool" type="text" />
<label for="something-cool">Something Cool</label>

input:focus + label { position: relative; top: -20px; }

Victor Pavlov

# April 9, 2014

Here is very good example It realised like small jQuery plugin and can be customized as you wish.

Sumit Singh

# August 20, 2019

I want same class on label when there is value on input, How to do that

Need front-end development training?

Need front-end development training?

Comments

Leave a Reply Cancel reply