placeholder是html5新增的一個(gè)屬性，極大的減輕了表單提示功能的實(shí)現(xiàn)，但是對(duì)于IE6-IE9真的是只能靠自己寫(xiě)啦！

但是在自己寫(xiě)時(shí)會(huì)掉進(jìn)了一個(gè)坑里，還好用了一會(huì)時(shí)間還是爬出來(lái)啦。

最終的解決方法方法如下：

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="點(diǎn)擊登錄" 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

?

而對(duì)應(yīng)的js組件寫(xiě)法如下：

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設(shè)置 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實(shí)現(xiàn) 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

而調(diào)用方法如下：

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的類(lèi)型上，當(dāng)input為password的時(shí)候，如果你還只是直接設(shè)置val來(lái)做提示，那你就已經(jīng)掉坑里啦，因?yàn)樵趐assword 會(huì)把輸入的內(nèi)容成..的形式，所以得繞一下，如果是password的話可以在password的那一組里新增一個(gè)元素去顯示要提示的內(nèi)容,像其中<span style="display:none" class="placespan"></span>就是專(zhuān)門(mén)用來(lái)做提示用的,在CSS里要先寫(xiě)好提示所用到的一干樣式，樣式為tipsdiv的P元素是用來(lái)放驗(yàn)證提示內(nèi)容的，這里不用管，當(dāng)表單獲得焦點(diǎn)的時(shí)候或者span被點(diǎn)擊的時(shí)候span都會(huì)消失，而input開(kāi)始可以輸入內(nèi)容啦。

<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能用的情況下，在各瀏覽器下也會(huì)有一些差異，在ff和chrome下，輸入框獲得焦點(diǎn)時(shí)，placeholder文字沒(méi)有變化，只有當(dāng)輸入框中輸入了內(nèi)容時(shí)，placeholder文字才消失；而在safari和ie10-ie11下，當(dāng)輸入框獲得焦點(diǎn)時(shí)，placeholder文字便立即消失。

默認(rèn)情況下，placeholder的文字是灰色，輸入的文字是黑色。而我們拿到的設(shè)計(jì)稿上的色值往往并不與默認(rèn)情況下完全一致。那么，如何修改placeholder的色值呢？

如果直接寫(xiě)input{color:red;}，可以看到，ie10和ff下，placeholder文字和輸入文字都變成了紅色.

而在chrome和safari下，placeholder文字顏色不變，只有輸入的文字變成紅色。

顯然，這種做法是行不通的。因?yàn)槲覀冎幌敫淖僷laceholder文字的顏色，并不想改變輸入文字的顏色。 正確的寫(xiě)法如下： ::-moz-placeholder{color:red;} ? ? ? ? ? ? ?//ff ::-webkit-input-placeholder{color:red;} ? ? //chrome,safari :-ms-input-placeholder{color:red;} ? ? ? ? ?//ie10

轉(zhuǎn)載于:https://www.cnblogs.com/xwwin/p/4233338.html

總結(jié)

以上是生活随笔為你收集整理的placeholder的兼容处理方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。