Highlight Related Label when Input in Focus

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

Comments

  1. User Avatar
    asheep
    Permalink to comment#

    pleasee give me this example :(

  2. User Avatar
    jamie paterson
    Permalink to comment#

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

  3. User Avatar
    JohnMotyJr
    Permalink to comment#

    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.

  4. User Avatar
    David Tintner
    Permalink to comment#

    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; }
    
  5. User Avatar
    Victor Pavlov
    Permalink to comment#

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

Submit a Comment

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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag