在html5中，文本框，也就是input， type为text，或者password，新增了一个属性placeholder，也就是占位符，以下是firefox浏览器下的表现形式
当输入的时候，占位符就会消失
这个属性非常好用，因为有这个必要html5才会因素这个属性，然而在IE下，就没有这效果，以下是IE9的表现
为了这个效果，我写了一个jQuery的插件，让IE浏览器实现这效果
代码如下
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(''+text+'');
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': "#cecfc9", '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;
};
至于代码这里也不解释，也就是三十多行，应该能看得明白。
引入jQuery库，然后引入这个插件，调用如下：
jQuery('input[placeholder]').placeholder();
至于样式什么的，你可以自己手工改一下修改代码是这一句：
placeholder.css({
'margin-left': -(width-pdl),
'height':height,
'line-height':height+"px",
'position':'absolute',
'color': "#cecfc9",
'font-size' : "12px"});
更新时间：2016-02-17
