jquery placeholder插件实现HTML5属性placeholder效果

/**
* IE10以下用js实现HTML5属性placeholder效果的几种方式；
* 由于IE10以下的IE不支持HTML5标签placeholder属性，此插件是让IE支持placeholder属性。支持textarea, input标签！
*/

//------------------------------------第一种方法---------------------------------------------------//
/**
* 用法：
* 1、页面引入此js，需jquery.js支持;
* 2、在input、textarea标签中加入属性 placeholder="xxxx";
* 3、js中加载这样一句代码即可：$('input[placeholder]').placeholder();
*/
(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);

 

//------------------------------------第二种方法---------------------------------------------------//
/**
* 用法：
* 1、在页面上引入此js，需jquery.js支持;
* 2、在input、textarea标签中加入属性 placeholder="xxxx"即可。
*/
$(function() {
// -- Constants --
var PLACE_HOLDER_COLOR = "rgb(169,169,169)"; // "darkGrey" does not work
// in IE6
var PLACE_HOLDER_DATA_NAME = "original-font-color";

// -- Util Methods --
var getContent = function(element) {
return $(element).val();
}

var setContent = function(element, content) {
$(element).val(content);
}

var getPlaceholder = function(element) {
return $(element).attr("placeholder");
}

var isContentEmpty = function(element) {
var content = getContent(element);
return (content.length === 0) || content == getPlaceholder(element);
}

var setPlaceholderStyle = function(element) {
$(element).data(PLACE_HOLDER_DATA_NAME, $(element).css("color"));
$(element).css("color", PLACE_HOLDER_COLOR);
}

var clearPlaceholderStyle = function(element) {
$(element).css("color", $(element).data(PLACE_HOLDER_DATA_NAME));
$(element).removeData(PLACE_HOLDER_DATA_NAME);
}

var showPlaceholder = function(element) {
setContent(element, getPlaceholder(element));
setPlaceholderStyle(element);
}

var hidePlaceholder = function(element) {
if ($(element).data(PLACE_HOLDER_DATA_NAME)) {
setContent(element, "");
clearPlaceholderStyle(element);
}
}

// -- Event Handlers --
var inputFocused = function() {
if (isContentEmpty(this)) {
hidePlaceholder(this);
}
}

var inputBlurred = function() {
if (isContentEmpty(this)) {
showPlaceholder(this);
}
}

var parentFormSubmitted = function() {
if (isContentEmpty(this)) {
hidePlaceholder(this);
}
}

// -- Bind event to components --
$("textarea, input[type='text']").each(function(index, element) {
if ($(element).attr("placeholder")) {
$(element).focus(inputFocused);
//$(element).blur(inputBlurred);
$(element).bind("parentformsubmitted", parentFormSubmitted);

// triggers show place holder on page load
$(element).trigger("blur");
// triggers form submitted event on parent form submit
$(element).parents("form").submit(function() {
$(element).trigger("parentformsubmitted");
});
}
});
});

 

判断浏览器是否支持HTML5属性placeholder
if("placeholder" in document.createElement("input")){

　　//支持

}else{

　　//不支持

}

附一个地址：https://github.com/danielstocks/jQuery-Placeholder

转载于:https://www.cnblogs.com/guijl/archive/2012/11/16/2773683.html