标签：style http color io os ar 文件 sp div
在html5中，文本框，也就是input， type为text，或者password，新增了一个属性placeholder，也就是占位符，当输入的时候，占位符就会消失。jQuery.fn.placeholder = function(){
var i = document.createElement(‘input‘),
placeholdersupport = ‘placeholder‘ in i;
if(!placeholdersupport){
var inputs = jQuery(this);
inputs.each(function(){
var input = jQuery(this),
text = input.attr(‘placeholder‘),
pdl = 0,
height = input.outerHeight(),
width = input.outerWidth(),
placeholder = jQuery(‘<span class="phTips">‘+text+‘</span>‘);
try{
pdl = input.css(‘padding-left‘).match(/\d*/i)[0] * 1;
}catch(e){
pdl = 5;
}
placeholder.css({‘margin-left‘: -(width-pdl),‘height‘:height,‘line-height‘:height+"px",‘position‘:‘absolute‘, ‘color‘: "#6C7C88", ‘font-size‘ : "12px"});
placeholder.click(function(){
input.focus();
});
if(input.val() != ""){
placeholder.css({display:‘none‘});
}else{
placeholder.css({display:‘inline‘});
}
placeholder.insertAfter(input);
input.keyup(function(e){
if(jQuery(this).val() != ""){
placeholder.css({display:‘none‘});
}else{
placeholder.css({display:‘inline‘});
}
});
});
}
return this;
};代码不复杂简单易懂~直接写入JS文件引用便可调用，不与firefox,google的属性冲突
引入jQuery库，然后引入这个插件，调用如下：$(function (){
jQuery(‘input[placeholder]‘).placeholder();
}
);
样式也可以自由修改如下：
placeholder.css({
‘margin-left‘: -(width-pdl),
‘height‘:height,
‘line-height‘:height+"px",
‘position‘:‘absolute‘,
‘color‘: "#cecfc9",
‘font-size‘ : "12px"});
如果存在什么bug请大家回复以便及时修正~
标签：style http color io os ar 文件 sp div
原文地址：http://www.cnblogs.com/JesseLu/p/4019294.html
