-
-
Save ebello/330358 to your computer and use it in GitHub Desktop.
Placeholder fixer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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" | |
} | |
}); | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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}})})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Added check to see if a placeholder existed before adding events.