js/jquery.infieldlabel.js

   1 /**
   2  * @license In-Field Label jQuery Plugin
   3  * http://fuelyourcoding.com/scripts/infield.html
   4  *
   5  * Copyright (c) 2009-2010 Doug Neiner
   6  * Dual licensed under the MIT and GPL licenses.
   7  * Uses the same license as jQuery, see:
   8  * http://docs.jquery.com/License
   9  *
  10  * @version 0.1.2
  11  */
  12 (function ($) {
  13
  14   $.InFieldLabels = function (label, field, options) {
  15     // To avoid scope issues, use 'base' instead of 'this'
  16     // to reference this class from internal events and functions.
  17     var base = this;
  18
  19     // Access to jQuery and DOM versions of each element
  20     base.$label = $(label);
  21     base.label  = label;
  22
  23     base.$field = $(field);
  24     base.field  = field;
  25
  26     base.$label.data("InFieldLabels", base);
  27     base.showing = true;
  28
  29     base.init = function () {
  30       // Merge supplied options with default options
  31       base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
  32
  33       // Check if the field is already filled in
  34       if (base.$field.val() !== "") {
  35         base.$label.hide();
  36         base.showing = false;
  37       }
  38
  39       base.$field.focus(function () {
  40         base.fadeOnFocus();
  41       }).blur(function () {
  42         base.checkForEmpty(true);
  43       }).bind('keydown.infieldlabel', function (e) {
  44         // Use of a namespace (.infieldlabel) allows us to
  45         // unbind just this method later
  46         base.hideOnChange(e);
  47       }).bind('paste', function (e) {
  48         // Since you can not paste an empty string we can assume
  49         // that the fieldis not empty and the label can be cleared.
  50         base.setOpacity(0.0);
  51       }).change(function (e) {
  52         base.checkForEmpty();
  53       }).bind('onPropertyChange', function () {
  54         base.checkForEmpty();
  55       });
  56     };
  57
  58     // If the label is currently showing
  59     // then fade it down to the amount
  60     // specified in the settings
  61     base.fadeOnFocus = function () {
  62       if (base.showing) {
  63         base.setOpacity(base.options.fadeOpacity);
  64       }
  65     };
  66
  67     base.setOpacity = function (opacity) {
  68       base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
  69       base.showing = (opacity > 0.0);
  70     };
  71
  72     // Checks for empty as a fail safe
  73     // set blur to true when passing from
  74     // the blur event
  75     base.checkForEmpty = function (blur) {
  76       if (base.$field.val() === "") {
  77         base.prepForShow();
  78         base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
  79       } else {
  80         base.setOpacity(0.0);
  81       }
  82     };
  83
  84     base.prepForShow = function (e) {
  85       if (!base.showing) {
  86         // Prepare for a animate in...
  87         base.$label.css({opacity: 0.0}).show();
  88
  89         // Reattach the keydown event
  90         base.$field.bind('keydown.infieldlabel', function (e) {
  91           base.hideOnChange(e);
  92         });
  93       }
  94     };
  95
  96     base.hideOnChange = function (e) {
  97       if (
  98           (e.keyCode === 16) || // Skip Shift
  99           (e.keyCode === 9) // Skip Tab
 100         ) {
 101         return;
 102       }
 103
 104       if (base.showing) {
 105         base.$label.hide();
 106         base.showing = false;
 107       }
 108
 109       // Remove keydown event to save on CPU processing
 110       base.$field.unbind('keydown.infieldlabel');
 111     };
 112
 113     // Run the initialization method
 114     base.init();
 115   };
 116
 117   $.InFieldLabels.defaultOptions = {
 118     fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
 119     fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
 120   };
 121
 122
 123   $.fn.inFieldLabels = function (options) {
 124     return this.each(function () {
 125       // Find input or textarea based on for= attribute
 126       // The for attribute on the label must contain the ID
 127       // of the input or textarea element
 128       var for_attr = $(this).attr('for'), $field;
 129       if (!for_attr) {
 130         return; // Nothing to attach, since the for field wasn't used
 131       }
 132
 133       // Find the referenced input or textarea element
 134       $field = $(
 135         "input#" + for_attr + "[type='text']," +
 136         "input#" + for_attr + "[type='search']," +
 137         "input#" + for_attr + "[type='tel']," +
 138         "input#" + for_attr + "[type='url']," +
 139         "input#" + for_attr + "[type='email']," +
 140         "input#" + for_attr + "[type='password']," +
 141         "textarea#" + for_attr
 142       );
 143
 144       if ($field.length === 0) {
 145         return; // Again, nothing to attach
 146       }
 147
 148       // Only create object for input[text], input[password], or textarea
 149       (new $.InFieldLabels(this, $field[0], options));
 150     });
 151   };
 152
 153 }(jQuery));