IE 8 浏览器 placeholder 兼容性处置惩罚

2024年2月3日 104次阅读 来源: Herylee

写在前面

因为公司的产物须要兼容 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>

愿望可以对人人有协助。

    原文作者：Herylee
    原文地址: https://segmentfault.com/a/1190000019324810
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞