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

Reply ↓

jamie paterson

# March 29, 2012

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

Reply ↓

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.

Reply ↓

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

Reply ↓

Victor Pavlov

# April 9, 2014

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

Reply ↓

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Highlight Related Label when Input in Focus

Comments

Submit a Comment

Posting Code

Code of Conduct

Want to tell us something privately?