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">&#xe602;</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