記得引用jquery類(lèi)庫(kù)
代碼如下:
$(document).ready(function(){
if($.browser.msie)
$("input:text,input:password").each(function(){
var$placeholder=$(this).attr("placeholder");
var$width=$(this).css("width");
var$id=$(this).attr("id");
var$height=parseInt($(this).css("height"))+6+"px";
var$fontSize=$(this).css("font-size");
var$fontWeight=$(this).css("font-weight");
var$lineHeight=$height;
if($(this).css("line-height")!="normal"){
$lineHeight=parseInt($(this).css("line-height"))+6+"px";
}
if($placeholder!=undefined){
$(this).after("<spanclass=\"placeholderph_"+$id+"\"style=\"width:"+$width+";line-height:"+$lineHeight+";height:"+$height+";font-weight:"+$fontWeight+";margin-left:-"+$width+";font-size:"+$fontSize+"\">"+$placeholder+"</span>");
}
$(this).bind("keyup",function(){
if($(this).val()==""){
$(this).parent().find(".ph_"+$id).css("display","inline-block");
}
else{
$(this).parent().find(".ph_"+$id).css("display","none");
}
});
});
$(".placeholder").live("click",function(){
$(this).prev().focus();
});
});
頁(yè)面調(diào)用
代碼如下:
<inputid="n1"type="text"placeholder="我是提示內(nèi)容正常"/>
<inputid="n2"type="text"placeholder="我是提示內(nèi)容寬高"style="width:100px;height:100px;"/>
<inputid="n3"type="text"placeholder="我是提示內(nèi)容我有其他樣式"/style="width:300px;height:40px;font-weight:bold;">
<inputid="n4"type="text"placeholder="還可以嘗試下其他的"/>
樣式
代碼如下:
<styletype="text/css">
.placeholder{display:inline-block;color:gray;vertical-align:top;overflow:hidden;}
</style>