IE 8 浏览器 placeholder 兼容性处理

写在前面

由于公司的产品需要兼容 IE8 浏览器，在做登陆时，发现一个问题，placeholder 在input = text 情况下，显示还算正常，但在 input = password 就变成了两个点，百度，gg很多，有的是通过lable 模拟，另外还有通过定位模拟，发现都不能很好地解决password 为点的问题。经过不断的尝试和参考别的产品在 IE 8 下兼容处理。我整理下，具体见下：

兼容处理

通过处理input focus时和 blur 时来控制文本的显示和隐藏。其中关键的时 input {background: none;} 和 z-index。
z-index 在父子元素中生效，需要在父级元素设置 position: relative

<!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>

希望能够对大家有帮助。

IE 8 浏览器 placeholder 兼容性处理

写在前面

兼容处理

相关推荐