/** * jQuery.labelify - Display in-textbox hints * Stuart Langridge, http://www.kryogenix.org/ * Released into the public domain * Date: 25th June 2008 * @author Stuart Langridge * @version 1.3 * * * Basic calling syntax: $("input").labelify(); * Defaults to taking the in-field label from the field's title attribute * * You can also pass an options object with the following keys: * text * "title" to get the in-field label from the field's title attribute * (this is the default) * "label" to get the in-field label from the inner text of the field's label * (note that the label must be attached to the field with for="fieldid") * a function which takes one parameter, the input field, and returns * whatever text it likes * * labelledClass * a class that will be applied to the input field when it contains the * label and removed when it contains user input. Defaults to blank. * */ jQuery.fn.labelify = function(settings) { settings = jQuery.extend({ text: "title", labelledClass: "" }, settings); var lookups = { title: function(input) { return $(input).attr("title"); }, label: function(input) { return $("label[for=" + input.id +"]").text(); } }; var lookup; var jQuery_labellified_elements = $(this); return $(this).each(function() { if (typeof settings.text === "string") { lookup = lookups[settings.text]; // what if not there? } else { lookup = settings.text; // what if not a fn? }; // bail if lookup isn't a function or if it returns undefined if (typeof lookup !== "function") { return; } var lookupval = lookup(this); if (!lookupval) { return; } // need to strip newlines because the browser strips them // if you set textbox.value to a string containing them $(this).data("label",lookup(this).replace(/\n/g,'')); $(this).focus(function() { if (this.value === $(this).data("label")) { this.value = this.defaultValue; $(this).removeClass(settings.labelledClass); } }).blur(function(){ if (this.value === this.defaultValue) { this.value = $(this).data("label"); $(this).addClass(settings.labelledClass); } }); var removeValuesOnExit = function() { jQuery_labellified_elements.each(function(){ if (this.value === $(this).data("label")) { this.value = this.defaultValue; $(this).removeClass(settings.labelledClass); } }) }; $(this).parents("form").submit(removeValuesOnExit); $(window).unload(removeValuesOnExit); if (this.value !== this.defaultValue) { // user already started typing; don't overwrite their work! return; } // actually set the value this.value = $(this).data("label"); $(this).addClass(settings.labelledClass); }); };