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

實例:
1 <input type="text" name="userName" placeholder="請輸入用戶名">

placeholder操作起來非常方便，提高了開發效率，同時在高版本瀏覽器中用戶體驗也很好，所以本人很喜歡用這個屬性。

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

• IE10+里鼠標點擊時（獲取焦點）placeholder文本消失
• Firefox/Chrome/Safari點擊不消失，而是鍵盤輸入時文本消失

因此想到用span標簽浮動在input控件上，當input控件失去焦點時顯示span，獲取焦點是隱藏span，來模擬placeholder的效果，具體代碼如下: <form action=""><span class="placeholder1">手機號碼</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>
僅僅這樣寫會出現一個問題，就是當用戶想要去input控件里輸入內容的時候，會點到浮動著的span標簽，導致input控件無法獲取焦點，有一個辦法，當點擊到span的時候使得input控件獲取焦點，因此有以下的解決方式： $(".placeholder1").on("click",function(){$(".user_phone").focus();});$(".placeholder2").on("click",function(){$(".user_password").focus();});
最終效果：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。