Some of the HTML5 features just won’t come fast enough. One such feature is the ability to apply a placeholder input attribute, something like placeholder=’your text’ which takes the text and sets it as a pseudo default input value until it’s focused or changed. Currently (at time of writing), this only works in webkit-based browsers like Chrome and Safari but it’s not difficult to bring it into all other browsers.
Here’s a little class / mootools plugin that I wrote to do it:
var mooPlaceholder = new Class({ // behaviour for default values of inputs class Implements: [Options], options: { // default options htmlPlaceholder: "placeholder", // the element attribute, eg, data-placeholder="MM/YY" -> "data-placeholder" unmoddedClass: "unchanged", // apply a class to the unmodded input, say, to grey it out parentNode: document, // limit to a particular set of child nodes defaultSelector: "input[placeholder]" }, initialize: function(options) { this.setOptions(options); // detect native support (nothing gets done if true) this.nativeSupport = 'placeholder' in document.createElement('input'); }, attachToElements: function(selector) { // basic function example that uses a class selector to var inputs = this.options.parentNode.getElements(selector || this.options.defaultSelector); if (inputs.length) { inputs.each(function(el) { this.attachEvents(el); }, this); } }, // end attachToElements attachEvents: function(el, placeholder) { // method that attaches the events to an input element. var placeholder = placeholder || el.get(this.options.htmlPlaceholder); if (this.nativeSupport || !$(el) || !placeholder || !placeholder.length) return; el.set("value", placeholder).store("placeholder", placeholder); // append unmodded class to input at start if (this.options.unmoddedClass) el.addClass(this.options.unmoddedClass); // now cater for the events el.addEvents({ change: function() { // when value changes var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); if (value != placeholder) { // once it changes, remove this check and remove the unmoddedClass el.removeClass(this.options.unmoddedClass).removeEvents("change"); } }.bind(this), focus: function() { var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); if (value == placeholder) { el.set("value", "").removeClass(this.options.unmoddedClass); } }.bind(this), blur: function() { var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); if (value == placeholder || value == "") { el.set("value", placeholder).addClass(this.options.unmoddedClass); } }.bind(this) }); } }); // example use for a single element: new mooPlaceholder().attachEvents($("searchfield"), "type here to search site..."); // override placeholder new mooPlaceholder().attachEvents($("searchfield")); // use placeholder= value instead // example use for any input element that has a placeholder property: new mooPlaceholder().attachToElements(); // defaults to "input[placeholder]" // or a custom selector new mooPlaceholder().attachToElements("input.foo"); // or only inputs of a particular form with a particular class (required) new mooPlaceholder({ parentNode: $("mysignupform"), }).attachToElements("input.required[placeholder]");
Clearly, many ways to use it. It will only work as progressive enhancement and won’t attach anything if the browser already supports placeholders.
Make sue you set the CSS class for the unmodded input (look at the CSS tab on JSFIDDLE for an example) – it seems that natively, the text goes to #A9A9A9 but you may be able to override that. Vendor specific CSS styles allow you to work with this:
input.unmodded::-webkit-input-placeholder { color: rgb(100, 0, 0); }
Have fun.
[…] This post was mentioned on Twitter by Alexandre Rocha, Dimitar Christoff. Dimitar Christoff said: mooPlaceholder: input placeholder behaviour class http://bit.ly/b1AOty #mootools […]