更新時間：2016-02-17在html5中，文本框，也就是input， type為text，或者password，新增了一個屬性placeholder，也就是占位符，以下是firefox瀏覽器下的表現(xiàn)形式
當(dāng)輸入的時候，占位符就會消失
這個屬性非常好用，因為有這個必要html5才會因素這個屬性，然而在IE下，就沒有這效果，以下是IE9的表現(xiàn)
為了這個效果，我寫了一個jQuery的插件，讓IE瀏覽器實現(xiàn)這效果
代碼如下
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;
};
至于代碼這里也不解釋，也就是三十多行，應(yīng)該能看得明白。
引入jQuery庫，然后引入這個插件，調(diào)用如下：
jQuery('input[placeholder]').placeholder();
至于樣式什么的，你可以自己手工改一下修改代碼是這一句：
placeholder.css({
'margin-left': -(width-pdl),
'height':height,
'line-height':height+"px",
'position':'absolute',
'color': "#cecfc9",
'font-size' : "12px"});
