IE 8 browser placeholder compatibility handling

Keywords: Javascript IE JQuery

Written in front

Because the company's products need to be compatible with IE8 browser, when logging in, we found a problem. When input = text, the display of placeholder is normal, but when input = password, it becomes two points. Baidu and gg are many, some of them are simulated by lable, and others are simulated by location. We found that the problem of password as a point cannot be solved very well. After continuous attempts and reference to other products in IE 8 compatible processing. I'll sort it out as follows:

Compatible processing

Control the display and hiding of text by processing input focus and blur. The key ones are input {background: none;} and z-index.
z-index takes effect in the parent-child element. position: relative needs to be set in the parent element

<!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">Cell-phone number/mailbox</span>
        </div>
               <div class="child">
            <input type="password" class="ds-input" id="password" autocomplete="off">
            <span class="tips" id="tip_password">Password</span>
        </div>
    </div>
</body>
</html>

I hope it can help you.

Posted by phpnoobie9 on Sun, 03 Nov 2019 07:58:16 -0800