js实现html5占位文本功能，支持password输入框

这段js采用jquery作为基础，实现支持html5的新特性占位文本主要针对密码输入框做了特殊处理。

1 function supports_placeholder() {
2 var i = document.createElement('input');
3 return 'placeholder' in i;
4 }
5 function jplaceholder(jq) {
6 if (!supports_placeholder()) {
7 var ispassword = jq.attr('type') == 'password';
8 var duplicate = $("<input type='text' />");
9 if(ispassword){
//copy prop
duplicate.attr("class",jq.attr("class"));
duplicate.attr("style",jq.attr("style"));
duplicate.val(jq.attr("placeholder"));
duplicate.focus(function(){
duplicate.hide();
jq.show().focus();
});
jq.after(duplicate);
jq.hide();
}else{
jq.addClass('placeholder');
jq.val(jq.attr('placeholder'));
}
jq.focus(function() {
if(!ispassword){
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
if(!ispassword){
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}else{
jq.hide();
duplicate.show();
}
}
});
jq.parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
});
}
}

$(function() {
$('input[placeholder]').each(function(i,o) {
jplaceholder($(o));
});
});