placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。
如
<input type="text" id="userName" placeholder=" 用户名"/> <input type = "password" id="passWord" placeholder="密码"/>
目前浏览器的支持情况
浏览器 |
IE6/7/8/9 |
IE10+ |
Firefox |
Chrome |
Safari |
是否支持 |
NO |
YES |
YES |
YES |
YES |
然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致
IE10+里鼠标点击时（获取焦点）placeholder文本消失
Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失
我们希望ＩＥ低版本下实现ＩＥ１０＋ placeholder的效果，可以通过以下方法:
首先css 的样式如下：
<style type="text/css">
input[type="text"]
{
display:block;
margin:0 auto;
width: 230px;
text-align: center;
}
#userName
{
margin-top: 31px;
border: none;
color: #616060;
border-bottom: 1px solid #949799;
}
#passWord
{
display: block;
margin: 0 auto;
width: 230px;
text-align: center;
font-size: 11px;
color: #616060;
border: none;
border-bottom: 1px solid #949799;
cursor: pointer;
padding: 0 0 1px 1px;
margin-top: 25px;
}
#placeholder
{
display: block;
margin: 0 auto;
width: 230px;
text-align: center;
font-size: 11px;
color: #616060;
border: none;
border-bottom: 1px solid #949799;
cursor: pointer;
padding: 0 0 1px 1px;
margin-top: -16px;
position:relative;
}
#placeholder:focus,#placeholder:hover
{
color: #1e94da;
border-color:#1e94da;
}
#passWord:focus,#passWord:hover{color: #1e94da;border-color:#1e94da;}
</style>
对于不涉及转换input的type的仿写比较简单，代码如下：
$().ready(function(){
$("#passWord").after("<input type = ‘text‘ value=‘
密码‘ id=‘placeholder‘>");
if($("#userName").val()=="")
{
$("#userName").val("用户名");
}
$("#userName").focus(function(){
if($(this).val()=="用户名")
{
$(this).val("");
}
});
});
对于密码框的placeholder的仿写，由于ＩＥ８下并不支持input类型type的转换，因此我选择使用两个不同类型密码框叠加的方法实现该效果，具体代码如下：
$().ready(function(){
//
添加密码提示框
$("#passWord").after("<input type = ‘text‘ value=‘密码‘ id=‘placeholder‘>");
//对密码框的仿写
$("#placeholder").focus(function(){
$(this).val("");
$(this).css("z-index","-1");
$("#passWord").focus();
});
$("#passWord").blur(function(){
if($(this).val()=="")
{
$("#placeholder").val("密码");
$("#placeholder").css("z-index","1");
}
});
});
效果如下：
图1
点击过后输入密码：
图2
看上去似乎没什么问题，然而如果密码框中有默认值，则仍会显示密码的提示效果（图1），只有点击过后才会出现如图2的效果，因此我们需要在添加数据后，触发一次focus事件和blur事件：
如下：
$("#userName").val("hello");
$("#passWord").val("888888");
$("#placeholder").focus();
setTimeout("$(‘#passWord‘).blur();",1);
这里使用setTimeout()为blur（）添加延时效果，是在IE8中测试过的效果，不知道什么原因，这样写
$("#placeholder").focus();
$(‘#passWord‘).blur();
在IE8中blur（）事件并不能触发，添加了延时后，即能正常实现了
完整的js代码如下：
<script type="text/javascript">
$().ready(function(){
$("#passWord").after("<input type = ‘text‘ value=‘
密码‘ id=‘placeholder‘>");
if($("#userName").val()=="")
{
$("#userName").val("账号");
}
$("#userName").focus(function(){
if($(this).val()=="账号")
{
$(this).val("");
}
});
$("#userName").blur(function(){
if($(this).val()=="")
{
$(this).val("账号");
}
});
$("#placeholder").focus(function(){
$(this).val("");
$(this).css("z-index","-1");
$("#passWord").focus();
});
$("#passWord").blur(function(){
if($(this).val()=="")
{
$("#placeholder").val("密码");
$("#placeholder").css("z-index","1");
}
});
$("#userName").val("chen");
$("#passWord").val("888888");
$("#placeholder").focus();
setTimeout("$(‘#passWord‘).blur();",1);
});
</script>
IE8下对type=checkbox类型的input的placeholder属性的仿写
原文：http://my.oschina.net/u/2335552/blog/511358