media/js/jquery.labelify.js

   1 /**
   2  * jQuery.labelify - Display in-textbox hints
   3  * Stuart Langridge, http://www.kryogenix.org/
   4  * Released into the public domain
   5  * Date: 25th June 2008
   6  * @author Stuart Langridge
   7  * @version 1.3
   8  *
   9  *
  10  * Basic calling syntax: $("input").labelify();
  11  * Defaults to taking the in-field label from the field's title attribute
  12  *
  13  * You can also pass an options object with the following keys:
  14  *   text
  15  *     "title" to get the in-field label from the field's title attribute
  16  *      (this is the default)
  17  *     "label" to get the in-field label from the inner text of the field's label
  18  *      (note that the label must be attached to the field with for="fieldid")
  19  *     a function which takes one parameter, the input field, and returns
  20  *      whatever text it likes
  21  *
  22  *   labelledClass
  23  *     a class that will be applied to the input field when it contains the
  24  *      label and removed when it contains user input. Defaults to blank.
  25  *
  26  */
  27 jQuery.fn.labelify = function(settings) {
  28   settings = jQuery.extend({
  29     text: "title",
  30     labelledClass: ""
  31   }, settings);
  32   var lookups = {
  33     title: function(input) {
  34       return $(input).attr("title");
  35     },
  36     label: function(input) {
  37       return $("label[for=" + input.id +"]").text();
  38     }
  39   };
  40   var lookup;
  41   var jQuery_labellified_elements = $(this);
  42   return $(this).each(function() {
  43     if (typeof settings.text === "string") {
  44       lookup = lookups[settings.text]; // what if not there?
  45     } else {
  46       lookup = settings.text; // what if not a fn?
  47     };
  48     // bail if lookup isn't a function or if it returns undefined
  49     if (typeof lookup !== "function") { return; }
  50     var lookupval = lookup(this);
  51     if (!lookupval) { return; }
  52
  53     // need to strip newlines because the browser strips them
  54     // if you set textbox.value to a string containing them
  55     $(this).data("label",lookup(this).replace(/\n/g,''));
  56     $(this).focus(function() {
  57       if (this.value === $(this).data("label")) {
  58         this.value = this.defaultValue;
  59         $(this).removeClass(settings.labelledClass);
  60       }
  61     }).blur(function(){
  62       if (this.value === this.defaultValue) {
  63         this.value = $(this).data("label");
  64         $(this).addClass(settings.labelledClass);
  65       }
  66     });
  67
  68     var removeValuesOnExit = function() {
  69       jQuery_labellified_elements.each(function(){
  70         if (this.value === $(this).data("label")) {
  71           this.value = this.defaultValue;
  72           $(this).removeClass(settings.labelledClass);
  73         }
  74       })
  75     };
  76
  77     $(this).parents("form").submit(removeValuesOnExit);
  78     $(window).unload(removeValuesOnExit);
  79
  80     if (this.value !== this.defaultValue) {
  81       // user already started typing; don't overwrite their work!
  82       return;
  83     }
  84     // actually set the value
  85     this.value = $(this).data("label");
  86     $(this).addClass(settings.labelledClass);
  87
  88   });
  89 };