placeholder屬性是HTML5?中為input添加的。在input上提供一個(gè)占位符，文字形式展示輸入字段預(yù)期值的提示信息（hint），該字段會(huì)在輸入為空時(shí)顯示。

實(shí)例:
1 <input type="text" name="userName" placeholder="請(qǐng)輸入用戶名">

placeholder操作起來(lái)非常方便，提高了開發(fā)效率，同時(shí)在高版本瀏覽器中用戶體驗(yàn)也很好，所以本人很喜歡用這個(gè)屬性。

然而，在IE9以下版本瀏覽器就失效了，并且IE10+支持placeholder屬性，它的表現(xiàn)與其它瀏覽器也不一致

• IE10+里鼠標(biāo)點(diǎn)擊時(shí)（獲取焦點(diǎn)）placeholder文本消失
• Firefox/Chrome/Safari點(diǎn)擊不消失，而是鍵盤輸入時(shí)文本消失

因此想到用span標(biāo)簽浮動(dòng)在input控件上，當(dāng)input控件失去焦點(diǎn)時(shí)顯示span，獲取焦點(diǎn)是隱藏span，來(lái)模擬placeholder的效果，具體代碼如下: <form action=""><span class="placeholder1">手機(jī)號(hào)碼</span><input class="user_phone" type="text" οnfοcus="$('.placeholder1').hide()" οnblur="if($(this).val()!=''){$('.placeholder1').hide()}else{$('.placeholder1').show()}" /> <span class="placeholder2">密碼</span><input class="user_password" type="password" οnfοcus="$('.placeholder2').hide()" οnblur="if($(this).val()!=''){$('.placeholder2').hide()}else{$('.placeholder2').show()}"/></form>
僅僅這樣寫會(huì)出現(xiàn)一個(gè)問題，就是當(dāng)用戶想要去input控件里輸入內(nèi)容的時(shí)候，會(huì)點(diǎn)到浮動(dòng)著的span標(biāo)簽，導(dǎo)致input控件無(wú)法獲取焦點(diǎn)，有一個(gè)辦法，當(dāng)點(diǎn)擊到span的時(shí)候使得input控件獲取焦點(diǎn)，因此有以下的解決方式： $(".placeholder1").on("click",function(){$(".user_phone").focus();});$(".placeholder2").on("click",function(){$(".user_password").focus();});
最終效果：

總結(jié)

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

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