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.

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.

Submit a Comment

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