106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
/*
|
|
* 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); |