blob: 5a9441d5d1c2ab8950ffb44f150dc5fc4fd9b691 [file] [log] [blame]
/*
* Placeholder plugin for jQuery
* ---
* Copyright 2010, Daniel Stocks (http://webcloud.se)
* Released under the MIT, BSD, and GPL Licenses.
*/
(function($) {
function Placeholder(input) {
this.input = input;
if (input.attr('type') == 'password') {
this.handlePassword();
}
// Prevent placeholder values from submitting
$(input[0].form).submit(function() {
if (input.hasClass('placeholder') && input[0].value == input.attr('placeholder')) {
input[0].value = '';
}
});
}
Placeholder.prototype = {
show : function(loading) {
// FF and IE saves values when you refresh the page. If the user refreshes the page with
// the placeholders showing they will be the default values and the input fields won't be empty.
if (this.input[0].value === '' || (loading && this.valueIsPlaceholder())) {
if (this.isPassword) {
try {
this.input[0].setAttribute('type', 'text');
} catch (e) {
this.input.before(this.fakePassword.show()).hide();
}
}
this.input.addClass('placeholder');
this.input[0].value = this.input.attr('placeholder');
}
},
hide : function() {
if (this.valueIsPlaceholder() && this.input.hasClass('placeholder')) {
this.input.removeClass('placeholder');
this.input[0].value = '';
if (this.isPassword) {
try {
this.input[0].setAttribute('type', 'password');
} catch (e) { }
// Restore focus for Opera and IE
this.input.show();
this.input[0].focus();
}
}
},
valueIsPlaceholder : function() {
return this.input[0].value == this.input.attr('placeholder');
},
handlePassword: function() {
var input = this.input;
input.attr('realType', 'password');
this.isPassword = true;
// IE < 9 doesn't allow changing the type of password inputs
if ($.browser.msie && input[0].outerHTML) {
var fakeHTML = $(input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1'));
this.fakePassword = fakeHTML.val(input.attr('placeholder')).addClass('placeholder').focus(function() {
input.trigger('focus');
$(this).hide();
});
$(input[0].form).submit(function() {
fakeHTML.remove();
input.show();
});
}
}
};
var NATIVE_SUPPORT = !!("placeholder" in document.createElement( "input" ));
$.fn.placeholder = function() {
return NATIVE_SUPPORT ? this : this.each(function() {
var input = $(this);
var placeholder = new Placeholder(input);
placeholder.show(true);
input.focus(function() {
placeholder.hide();
});
input.blur(function() {
placeholder.show(false);
});
// On page refresh, IE doesn't re-populate user input
// until the window.onload event is fired.
if ($.browser.msie) {
$(window).load(function() {
if(input.val()) {
input.removeClass("placeholder");
}
placeholder.show(true);
});
// What's even worse, the text cursor disappears
// when tabbing between text inputs, here's a fix
input.focus(function() {
if(this.value == "") {
var range = this.createTextRange();
range.collapse(true);
range.moveStart('character', 0);
range.select();
}
});
}
});
};
})(jQuery);