Placeholder Enabler
Demo
Register the Class
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> <script src="html5-placeholder-enabler/html5-placeholder-enabler.js"></script> <script src="html5-placeholder-enabler/Example.js"></script>
Usage and Code Insight
YUI().use("html5-placeholder-enabler", function (Y) {
var placeholder = new Y.HTML5.Placeholder();
placeholder.enable();
}); /*
* Placeholder
* JavaScript enabler for HTML5 Placeholders
* developer's website: http://wemakesites.net/#!/web-dev
* developer's twitter: https://twitter.com/#!/wemakesitesnet
* developer's blog http://acidmartin.wordpress.com/
**/
YUI.add("html5-placeholder-enabler", function(Y) {
"use strict";
function Placeholder() {
Placeholder.superclass.constructor.apply(this, arguments);
}
Y.extend(Placeholder, Y.Base, {
enable: function() {
var
textarea = document.createElement("textarea");
if(undefined === textarea.placeholder) {
this._bind();
}
},
_bind: function(){
var
inputs = Y.all("input"),
textareas = Y.all("textarea"),
enabledcss = "placeholder-enabler",
placeholderattr = "data-placeholder",
_set = function(element, state) {
switch(state){
case true:
element.set("value", element.getAttribute("placeholder"));
element.addClass(enabledcss);
break;
case false:
element.set("value", "");
element.removeClass(enabledcss);
break;
}
},
_enable = function(e) {
var
element = e.currentTarget,
type = e.type;
switch(type){
case "focus":
if(element.get("value") === element.getAttribute("placeholder")) {
_set(element, false);
}
break;
case "blur":
if(element.get("value") === "") {
_set(element, true);
}
break;
}
},
_type = function(element) {
return element.get("type");
},
_bind = function(element) {
if(element.hasAttribute(placeholderattr)){
return;
}
_set(element, true);
element.on("focus", _enable);
element.on("blur", _enable);
element.setAttribute(placeholderattr, true);
};
inputs.each(function() {
if(_type(this) !== "text" && _type(this) !== "password") {
return;
}
_bind(this);
});
textareas.each(function() {
_bind(this);
});
}
});
Y.namespace("HTML5").Placeholder = Placeholder;
}, "0.0.1", {
requires: ["base", "event"]
});