placeholder是html5新增的一个属性，极大的减轻了表单提示功能的实现，但是对于IE6-IE9真的是只能靠自己写啦！
但是在自己写时会掉进了一个坑里，还好用了一会时间还是爬出来啦。
最终的解决方法方法如下：
1 <form name="doluform" id="loginform">
2 <div class="inputdivin">
3 <input type="text" placeholder="用户名" name="usernamez" value=""/>
4 <p class="tipsdiv"><span id="logintipsp"></span></p>
5 </div>
6 <div class="inputdivin">
7 <input type="password" placeholder="密码" name="passwordz" value=""/>
8 <span style="display:none" class="placespan"></span>
9 <p class="tipsdiv"><span id="loginposswordtipsp"></span></p>
10 </div>
11 <div class="inputivin">
12 <p id="jhemail"></p>
13 </div>
14 <div class="inputdivin">
15 <button type="submit" title="点击登录" class="submitbtn">登 录</button>
16 </div>
17 <div class="inputdivin">
18 <p class="passwordbc"><a href="javascript:void(0);" class="passwordaction" id="holdpassword"><b class="test"></b> 记住密码<input type="hidden" name="remfor_input" value="1"/></a></p>
19 <p class="findpassword"><a href="${ctx}/home/index/findpassword_step1.jsp" class="passwordaction">忘记密码</a></p>
20 </div>
21 </form>
而对应的js组件写法如下：
1 var Inputplace=function(){
2 this.obj=null;
3 this.type="";
4 this.color="";
5 this.tipspan=null;
6 }
7 Inputplace.prototype.init=function(obj,opt){
8 var This=this;
9 this.obj=obj;
10 this.setting={
11 "defaultz":obj.attr("placeholder"),
12 "tccolor":"#6d696a"
13 }
14 $.extend(this.setting,opt);
15 this.oldcolor=obj.css("color");
16 this.type=obj.attr("type");
17 if(this.type=="text"){//文本input设置
18 this.obj.val(this.setting.defaultz).css("color",this.setting.tccolor);
19 this.obj.unbind("focus");
20 this.obj.focus(function(){
21 if(This.obj.val()==This.setting.defaultz){
22 This.obj.val("").css("color",This.oldcolor);
23 }
24 })
25 this.obj.unbind("blur");
26 this.obj.blur(function(){
27 if(This.obj.val()=="" || /^\s*$/.test(This.obj.val())){
28 This.obj.val(This.setting.defaultz).css("color",This.setting.tccolor);
29 }
30 })
31 }
32 else if(this.type=="password"){//密码input实现
33 this.tipspan=this.obj.next("span.placespan");
34 this.tipspan.show().html(this.setting.defaultz).css({"color":this.setting.tccolor});
35 this.obj.unbind("focus");
36 this.obj.focus(function(){
37 This.tipspan.hide();
38 })
39 this.tipspan.unbind("click");
40 this.tipspan.click(function(){
41 $(this).hide();
42 This.obj.focus();
43 })
44 this.obj.unbind("blur");
45 this.obj.blur(function(){
46 if(This.obj.val()=="" || /^\s$/.test(This.obj.val())){
47 This.tipspan.show();
48 }
49 })
50 }
51 }
而调用方法如下：
1 <!--[if lte IE 9 ]>
2 <script type="text/javascript" src="${ctx}/static/js/common/jsplaceholder.js"></script>
3 <script type="text/javascript">
4 $(function(){
5 var inputtext=$("input:text");
6 inputtext.each(function(){
7 new Inputplace().init($(this))
8 })
9 var inputpass=$("input:password");
10 inputpass.each(function(){
11 new Inputplace().init($(this))
12 })
13 })
14 </script>
15 <![endif]-->
其中主要的坑就是在于input的类型上，当input为password的时候，如果你还只是直接设置val来做提示，那你就已经掉坑里啦，因为在password 会把输入的内容成..的形式，所以得绕一下，如果是password的话可以在password的那一组里新增一个元素去显示要提示的内容,像其中<span style="display:none" class="placespan"></span>就是专门用来做提示用的，当表单获得焦点的时候，或者span被点击的时候span都会消失，而input开始可以输入内容啦。
<div class="inputdivin">
<input type="password" placeholder="密码" name="registerpassword" value=""/>
<span style="display:none" class="placespan"></span>
<p class="tipsdiv"><span id="registerpasswordtipsid"></span></p>
</div>
注:就在html5的placeholder能用的情况下，在各浏览器下也会有一些差异，在ff和chrome下，输入框获得焦点时，placeholder文字没有变化，只有当输入框中输入了内容时，placeholder文字才消失；而在safari和ie10-ie11下，当输入框获得焦点时，placeholder文字便立即消失。
默认情况下，placeholder的文字是灰色，输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么，如何修改placeholder的色值呢？
如果直接写input{color:red;}，可以看到，ie10和ff下，placeholder文字和输入文字都变成了红色.
而在chrome和safari下，placeholder文字颜色不变，只有输入的文字变成红色。
显然，这种做法是行不通的。因为我们只想改变placeholder文字的颜色，并不想改变输入文字的颜色。
正确的写法如下：
::-moz-placeholder{color:red;} //ff
::-webkit-input-placeholder{color:red;} //chrome,safari
:-ms-input-placeholder{color:red;} //ie10