IE 8 瀏覽器 placeholder 兼容性處理

寫在前面

因爲公司的產品須要兼容 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

相關文章
相關標籤/搜索