Skip to content

Instantly share code, notes, and snippets.

@ebello
Forked from remy/gist:330318
Created March 12, 2010 14:32
Show Gist options
  • Save ebello/330358 to your computer and use it in GitHub Desktop.
Save ebello/330358 to your computer and use it in GitHub Desktop.
Placeholder fixer
/**
* Add this script to the end of your document that use <input autofocus type="text" />
* or <input type="text" placeholder="username" /> and it'll plug support for browser
* without these attributes
* Minified version at the bottom
*/
(function () {
function each(list, fn) {
var l = list.length;
for (var i = 0; i < l; i++) {
if (fn.call(list[i], list[i], i, list) === false) {
break;
}
}
}
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
var i = document.createElement('input'), inputs = document.getElementsByTagName('input');
if (!('placeholder' in i)) {
// placeholder fix
each(inputs, function (el) {
// note - we're using el instead of this across the board because it compresses better
var lastValue = el.value, placeholder = el.getAttribute('placeholder');
if (placeholder != null)
{
var focus = function () {
if (el.value == placeholder) {
el.value = '';
el.style.color = '';
}
};
var blur = function () {
if (el.value == '') {
el.value = placeholder;
el.style.color = '#A29797';
}
};
addEvent(el, 'focus', focus);
addEvent(el, 'blur', blur);
// remove the placeholder if the page is reload or the form is submitted
addEvent(el.form, 'submit', function () { focus.call(el); });
addEvent(window, 'unload', function () { focus.call(el); });
// set the default state
if (el.value == '') {
blur.call(el);
}
}
});
}
if (!('autofocus' in i)) {
// auto focus
each(inputs, function (el) {
if (el.getAttribute('autofocus') != null) {
el.focus();
return false; // "there can only be one"
}
});
}
})();
// minified by google closure
(function(){function f(a,c){for(var d=a.length,b=0;b<d;b++)if(c.call(a[b],a[b],b,a)===false)break}var e=function(){return document.addEventListener?function(a,c,d){if(a&&a.nodeName||a===window)a.addEventListener(c,d,false);else if(a&&a.length)for(var b=0;b<a.length;b++)e(a[b],c,d)}:function(a,c,d){if(a&&a.nodeName||a===window)a.attachEvent("on"+c,function(){return d.call(a,window.event)});else if(a&&a.length)for(var b=0;b<a.length;b++)e(a[b],c,d)}}(),g=document.createElement("input"),h=document.getElementsByTagName("input");
"placeholder"in g||f(h,function(a){var c=a.getAttribute("placeholder");if(c!=null){var d=function(){if(a.value==c){a.value="";a.style.color=""}},b=function(){if(a.value==""){a.value=c;a.style.color="#A29797"}};e(a,"focus",d);e(a,"blur",b);e(a.form,"submit",function(){d.call(a)});e(window,"unload",function(){d.call(a)});a.value==""&&b.call(a)}});"autofocus"in g||f(h,function(a){if(a.getAttribute("autofocus")!=null){a.focus();return false}})})();
@ebello
Copy link
Author

ebello commented Apr 1, 2010

Added check to see if a placeholder existed before adding events.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment