add class to label on input focus

JavaScript performance comparison

Test case created by johnmotyljr

Preparation code

<label for="title">
  Title:
</label>
<input type="text" id="title" class="user-input" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
switch case
var f = $.Event("focus");
$('.user-input').trigger(f);

$('.user-input').bind({
  focus: function() {
    var i = $(this).attr('id').toString();
    var e = $('div.' + i).css('background', '#3c67de');
    switch (i) {
    case 'title':
      e;
      break;
    case 'description':
      e;
      break;
    case 'resource':
      e;
      break;
    case 'tag':
      e;
      break;
    case 'theme':
      e;
      break;
    case 'language':
      e;
      break;
    }
    //$('div.' + i + ' label').css('text-align','right');
  },
  blur: function() {
    $('label').css('background', 'orange');
  }
});

var b = $.Event("blur");
$('.user-input').trigger(b);
pending…
chainable
var f = $.Event("focus");
$('.user-input').trigger(f);

$("form .user-input").bind({
focus: function() {
  $("label[for='" + this.id + "']").css('background', '#3c67de');
},
blur: function() {
  $("label").css('background', 'orange');
}
});

var b = $.Event("blur");
$('.user-input').trigger(b);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment