placeholder的兼容處理方法

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">登&nbsp;錄</button>
16     </div>
17     <div class="inputdivin">
18         <p class="passwordbc"><a href="javascript:void(0);" class="passwordaction" id="holdpassword"><b class="test">&#xe602;</b>&nbsp;&nbsp;記住密碼<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>

View Code

 

而對應的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 }

View Code

而調用方法以下：

 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]-->

View Code

其中主要的坑就是在於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