placeholder的兼容处理方法

placeholder是html5新增的一个属性，极大的减轻了表单提示功能的实现，但是对于IE6-IE9真的是只能靠自己写啦！

但是在自己写时会掉进了一个坑里，还好用了一会时间还是爬出来啦。

最终的解决方法方法如下：

 <form name="doluform" id="loginform">
     <div class="inputdivin">
         <input type="text" placeholder="用户名" name="usernamez" value=""/>
         <p class="tipsdiv"><span id="logintipsp"></span></p>
     </div>
     <div class="inputdivin">
         <input type="password" placeholder="密码" name="passwordz" value=""/>
         <span style="display:none" class="placespan"></span>
         <p class="tipsdiv"><span id="loginposswordtipsp"></span></p>
     </div>
     <div class="inputivin">
         <p id="jhemail"></p>
     </div>
     <div class="inputdivin">
         <button type="submit" title="点击登录" class="submitbtn">登&nbsp;录</button>
     </div>
     <div class="inputdivin">
         <p class="passwordbc"><a href="javascript:void(0);" class="passwordaction" id="holdpassword"><b class="test"></b>&nbsp;&nbsp;记住密码<input type="hidden" name="remfor_input" value="1"/></a></p>
         <p class="findpassword"><a href="${ctx}/home/index/findpassword_step1.jsp" class="passwordaction">忘记密码</a></p>
     </div>
 </form>

而对应的js组件写法如下：

 var Inputplace=function(){
     this.obj=null;
     this.type="";
     this.color="";
     this.tipspan=null;
 }
 Inputplace.prototype.init=function(obj,opt){
     var This=this;
     this.obj=obj;
     this.setting={
         "defaultz":obj.attr("placeholder"),
         "tccolor":"#6d696a"
     }
     $.extend(this.setting,opt);
     this.oldcolor=obj.css("color");
     this.type=obj.attr("type");
     if(this.type=="text"){//文本input设置
         this.obj.val(this.setting.defaultz).css("color",this.setting.tccolor);
         this.obj.unbind("focus");
         this.obj.focus(function(){
             if(This.obj.val()==This.setting.defaultz){
                 This.obj.val("").css("color",This.oldcolor);
             }
         })
         this.obj.unbind("blur");
         this.obj.blur(function(){
             if(This.obj.val()=="" || /^\s*$/.test(This.obj.val())){
                 This.obj.val(This.setting.defaultz).css("color",This.setting.tccolor);
             }
         })
     }
     else if(this.type=="password"){//密码input实现
         this.tipspan=this.obj.next("span.placespan");
         this.tipspan.show().html(this.setting.defaultz).css({"color":this.setting.tccolor});
         this.obj.unbind("focus");
         this.obj.focus(function(){
             This.tipspan.hide();
         })
         this.tipspan.unbind("click");
         this.tipspan.click(function(){
             $(this).hide();
             This.obj.focus();
         })
         this.obj.unbind("blur");
         this.obj.blur(function(){
             if(This.obj.val()=="" || /^\s$/.test(This.obj.val())){
                 This.tipspan.show();
             }
         })
     }
 }

而调用方法如下：

 <!--[if lte IE 9 ]>
 <script type="text/javascript" src="${ctx}/static/js/common/jsplaceholder.js"></script>
 <script type="text/javascript">
     $(function(){
         var inputtext=$("input:text");
         inputtext.each(function(){
             new Inputplace().init($(this))
         })
         var inputpass=$("input:password");
         inputpass.each(function(){
             new Inputplace().init($(this))
         })
     })
 </script>
 <![endif]-->

其中主要的坑就是在于input的类型上，当input为password的时候，如果你还只是直接设置val来做提示，那你就已经掉坑里啦，因为在password 会把输入的内容成..的形式，所以得绕一下，如果是password的话可以在password的那一组里新增一个元素去显示要提示的内容,像其中<span style="display:none" class="placespan"></span>就是专门用来做提示用的,在CSS里要先写好提示所用到的一干样式，样式为tipsdiv的P元素是用来放验证提示内容的，这里不用管，当表单获得焦点的时候或者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