因爲公司的產品須要兼容 IE8 瀏覽器,在作登錄時,發現一個問題,placeholder 在input = text
狀況下,顯示還算正常,但在 input = password
就變成了兩個點,百度,gg不少,有的是經過lable 模擬,另外還有經過定位模擬,發現都不能很好地解決password 爲點的問題。通過不斷的嘗試和參考別的產品在 IE 8 下兼容處理。我整理下,具體見下:javascript
經過處理input focus時和 blur 時來控制文本的顯示和隱藏。其中關鍵的時 input {background: none;}
和 z-index
。
z-index 在父子元素中生效,須要在父級元素設置 position: relativecss
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #fff; z-index: 1; } input {background: none;} .box { height: 300px; width: 300px; background: #f2f2f2; margin: 0 auto; padding-top: 20px; } .child { position: relative; margin: 20px; z-index: 2; border: 1px solid #ccc; height: 35px; background: #fff; } .ds-input { border: none medium; font-family: verdana; ime-mode: disabled; width: 243px; height: 21px; line-height: 21px; color: #bebebe; font-size: 14px; position: absolute; top: 0px; left: 5px; padding: 7px 0; outline: none; } .tips { position: absolute; z-index: -999; top: 2px; _top: 4px; left: 5px; color: #C3C3C3; font-size: 14px; line-height: 33px; visibility: visible; cursor: text; padding-left: 4px; } </style> <script type="text/javascript"> $(function(){ $("input").focus(function(){ var id = "#tip_"+this.id; $(id).hide(); }); $("input").blur(function(){ var id = "#tip_"+this.id; if(this.value=="") { $(id).show(); } }); }); </script> </head> <body> <div class="box"> <div class="child"> <input type="text" class="ds-input" id="username" autocomplete="off"> <span class="tips" id="tip_username">手機號/郵箱</span> </div> <div class="child"> <input type="password" class="ds-input" id="password" autocomplete="off"> <span class="tips" id="tip_password">密碼</span> </div> </div> </body> </html>
但願可以對你們有幫助。html