1 include(bbq.web.Browser);
  2 
  3 bbq.gui.form.behaviour.PlaceholderTextBehaviour = new Class.create(/** @lends bbq.gui.form.behaviour.PlaceholderTextBehaviour.prototype */ {
  4 	options: null,
  5 
  6 	/**
  7 	 * Adds the <a href="http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute">placeholder</a>
  8 	 * attribute to a form field or shims in support if placeholder is unsupported
  9 	 *
 10 	 * @constructs
 11 	 * @param {Object} options
 12 	 * @param {String} options.text The placeholder text
 13 	 */
 14 	initialize: function(options) {
 15 		this.options = options;
 16 	},
 17 
 18 	/**
 19 	 * Sets the field on which this behaviour operates
 20 	 *
 21 	 * @param {bbq.gui.form.FormField} field
 22 	 */
 23 	setField: function(field) {
 24 		// respect HTML5 style placeholder
 25 		if(Browser.forms.placeholderText) {
 26 			field.setAttribute("placeholder", this.options.text);
 27 
 28 			return;
 29 		}
 30 
 31 		// shim in placeholder for non-HTML5 browsers
 32 		if(!field.getRootNode().value) {
 33 			field.getRootNode().value = this.options.text;
 34 			field.addClass("placeholderText");
 35 		}
 36 
 37 		Event.observe(field.getRootNode(), "focus", function() {
 38 			if(field.getRootNode().value == this.options.text) {
 39 				field.getRootNode().value = "";
 40 				field.removeClass("placeholderText");
 41 			}
 42 		}.bind(this));
 43 
 44 		Event.observe(field.getRootNode(), "blur", function() {
 45 			if(!field.getRootNode().value) {
 46 				field.getRootNode().value = this.options.text;
 47 				field.addClass("placeholderText");
 48 			}
 49 		}.bind(this));
 50 	}
 51 });
 52