/**
* HTML5 placeholder polyfill
* @requires jQuery - tested with 1.6.2 but might as well work with older versions
*
* code: https://github.com/ginader/HTML5-placeholder-polyfill
* please report issues at: https://github.com/ginader/HTML5-placeholder-polyfill/issues
*
* Copyright (c) 2012 Dirk Ginader (ginader.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 2.0.6
*
*/
(function($) {
var debug = false,
animId;
function showPlaceholderIfEmpty(input,options) {
if( input.val() === '' ){
input.data('placeholder').removeClass(options.hideClass);
}else{
input.data('placeholder').addClass(options.hideClass);
}
}
function hidePlaceholder(input,options){
input.data('placeholder').addClass(options.hideClass);
}
function positionPlaceholder(placeholder,input){
var ta = input.is('textarea');
// Determine if we need to shift the header down more.
var offset = input.offset();
if (input.css('padding') && input.css('padding') !== '0px') {
var padding = input.css('padding').split(' ');
offset.top += Number(padding[0].replace('px', ''));
offset.left += Number(padding[padding.length - 1].replace('px', ''));
}
else {
if (input.css('padding-top') && input.css('padding-top') !== '0px') {
offset.top += Number(input.css('padding-top').replace('px', ''));
}
if (input.css('padding-left') && input.css('padding-left') !== '0px') {
offset.left += Number(input.css('padding-left').replace('px', ''));
}
}
placeholder.css({
width : input.innerWidth()-(ta ? 20 : 4),
height : input.innerHeight()-6,
lineHeight : input.css('line-height'),
whiteSpace : ta ? 'normal' : 'nowrap',
overflow : 'hidden'
}).offset(offset);
}
function startFilledCheckChange(input,options){
var val = input.val();
(function checkloop(){
animId = requestAnimationFrame(checkloop);
if(input.val() !== val){
hidePlaceholder(input,options);
stopCheckChange();
startEmptiedCheckChange(input,options);
}
}());
}
function startEmptiedCheckChange(input,options){
(function checkloop(){
animId = requestAnimationFrame(checkloop);
showPlaceholderIfEmpty(input,options);
}());
}
function stopCheckChange(){
cancelAnimationFrame(animId);
}
function log(msg){
if(debug && window.console && window.console.log){
window.console.log(msg);
}
}
$.fn.placeHolder = function(config) {
log('init placeHolder');
var o = this;
var l = $(this).length;
this.options = $.extend({
className: 'placeholder', // css class that is used to style the placeholder
visibleToScreenreaders : true, // expose the placeholder text to screenreaders or not
visibleToScreenreadersHideClass : 'placeholder-hide-except-screenreader', // css class is used to visually hide the placeholder
visibleToNoneHideClass : 'placeholder-hide', // css class used to hide the placeholder for all
hideOnFocus : false, // either hide the placeholder on focus or on type
removeLabelClass : 'visuallyhidden', // remove this class from a label (to fix hidden labels)
hiddenOverrideClass : 'visuallyhidden-with-placeholder', // replace the label above with this class
forceHiddenOverride : true, // allow the replace of the removeLabelClass with hiddenOverrideClass or not
forceApply : false, // apply the polyfill even for browser with native support
autoInit : true // init automatically or not
}, config);
this.options.hideClass = this.options.visibleToScreenreaders ? this.options.visibleToScreenreadersHideClass : this.options.visibleToNoneHideClass;
return $(this).each(function(index) {
var input = $(this),
text = input.attr('placeholder'),
id = input.attr('id'),
label,placeholder,titleNeeded,polyfilled;
if(text === "" || text === undefined) {
text = input[0].attributes["placeholder"].value;
}
label = input.closest('label');
input.removeAttr('placeholder');
if(!label.length && !id){
log('the input element with the placeholder needs an id!');
return;
}
label = label.length ? label : $('label[for="'+id+'"]').first();
if(!label.length){
log('the input element with the placeholder needs a label!');
return;
}
polyfilled = $(label).find('.placeholder');
if(polyfilled.length) {
//log('the input element already has a polyfilled placeholder!');
positionPlaceholder(polyfilled,input);
polyfilled.text(text);
return input;
}
if(label.hasClass(o.options.removeLabelClass)){
label.removeClass(o.options.removeLabelClass)
.addClass(o.options.hiddenOverrideClass);
}
placeholder = $('<span>').addClass(o.options.className).text(text).appendTo(label);
titleNeeded = (placeholder.width() > input.width());
if(titleNeeded){
placeholder.attr('title',text);
}
positionPlaceholder(placeholder,input);
input.data('placeholder',placeholder);
placeholder.data('input',placeholder);
placeholder.click(function(){
$(this).data('input').focus();
});
input.focusin(function() {
if(!o.options.hideOnFocus && window.requestAnimationFrame){
startFilledCheckChange(input,o.options);
}else{
hidePlaceholder(input,o.options);
}
});
input.focusout(function(){
showPlaceholderIfEmpty($(this),o.options);
if(!o.options.hideOnFocus && window.cancelAnimationFrame){
stopCheckChange();
}
});
showPlaceholderIfEmpty(input,o.options);
// reformat on window resize and optional reformat on font resize - requires: http://www.tomdeater.com/jquery/onfontresize/
$(document).bind("fontresize resize", function(){
positionPlaceholder(placeholder,input);
});
// optional reformat when a textarea is being resized - requires http://benalman.com/projects/jquery-resize-plugin/
if($.event.special.resize){
$("textarea").bind("resize", function(e){
positionPlaceholder(placeholder,input);
});
}else{
// we simply disable the resizeablilty of textareas when we can't react on them resizing
$("textarea").css('resize','none');
}
if(index >= l-1){
$.attrHooks.placeholder = {
get: function(elem) {
if (elem.nodeName.toLowerCase() === 'input' || elem.nodeName.toLowerCase() === 'textarea') {
if( $(elem).data('placeholder') ){
// has been polyfilled
return $( $(elem).data('placeholder') ).text();
}else{
// native / not yet polyfilled
return $(elem)[0].placeholder;
}
}else{
return undefined;
}
},
set: function(elem, value){
return $( $(elem).data('placeholder') ).text(value);
}
};
}
});
};
$(function(){
var config = window.placeHolderConfig || {};
if(config.autoInit === false){
log('placeholder:abort because autoInit is off');
return;
}
if(('placeholder' in $('<input>')[0] || 'placeHolder' in $('<input>')[0]) && !config.forceApply){ // don't run the polyfill when the browser has native support
log('placeholder:abort because browser has native support');
return;
}
$('input[placeholder], textarea[placeholder]').placeHolder(config);
});
}(jQuery));
