zoukankan html css js c++ java

解决IE8placeholder属性问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中宏网络商学院-用户登录</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<script type="text/javascript">
    //判断浏览器是否支持 placeholder属性  
    function isPlaceholder() {
        var input = document.createElement('input');
        return 'placeholder' in input;
    }

    $(document).ready(function () {
        if (!isPlaceholder()) {  //不支持placeholder 用jquery来完成
            var loginAccount = document.getElementById('LoginAccount').getAttributeNode('placeholder').nodeValue;
            var LoginPassword = document.getElementById('LoginPassword').getAttributeNode('placeholder').nodeValue;
            var style = document.getElementById('LoginPassword').getAttributeNode('class').nodeValue;
            $("input[id='LoginAccount']").each(//把input绑定事件 排除password框  
                function () {

                    if ($(this).val() == "" && loginAccount != "") {
                        $(this).val(loginAccount);
                        $(this).focus(function () {
                            if ($(this).val() == loginAccount) $(this).val("");
                        });
                        $(this).blur(function () {
                            if ($(this).val() == "") $(this).val(loginAccount);
                        });
                    }
                });
            //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换  
            var pwdField = $("input[type=password]");
            var pwdVal = LoginPassword;
            pwdField.after('<input id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" class="' + style + '"  tabindex = "2" />');
            var pwdPlaceholder = $('#pwdPlaceholder');
            pwdPlaceholder.show();
            pwdField.hide();

            pwdPlaceholder.focus(function () {
                pwdPlaceholder.hide();
                pwdField.show();
                pwdField.focus();
            });

            pwdField.blur(function () {
                if (pwdField.val() == '') {
                    pwdPlaceholder.show();
                    pwdField.hide();
                }
            });

            if (document.getElementById('LoginValCode') != null) {
                var LoginValCode = document.getElementById('LoginValCode').getAttributeNode('placeholder').nodeValue;
                var style = document.getElementById('LoginValCode').getAttributeNode('class').nodeValue;
                $("input[id='LoginValCode']").each(//把input绑定事件 排除password框  
                function () {

                    if ($(this).val() == "" && LoginValCode != "") {
                        $(this).val(LoginValCode);
                        $(this).focus(function () {
                            if ($(this).val() == LoginValCode) $(this).val("");
                        });
                        $(this).blur(function () {
                            if ($(this).val() == "") $(this).val(LoginValCode);
                        });
                    }
                });
            }
        }
    });  

</script>
<body>
<div class="wrap-full">
    <div class="block-box block-box-1 mt-45">
        <div class="block-body">
            <div class="block-cont">
                <div class="block-tit rel"><span class="ico abs"></span>用户登录</div>
                <div class="clear">
                    <div class="w-4 mtb100 br fl">
                        <ul class="list-login">
                            <li><span class="ico ico-1"></span> <input type="text" class="ipt" id="LoginAccount" placeholder="请输入身份证号码"></li>
                            <li><span class="ico ico-2"></span> <input type="password" class="ipt" id="LoginPassword" placeholder="请输入密码"></li>
                            <li class="clear"><span class="ico ico-3"></span> <input type="text" class="ipt ipt-s fl" id="LoginValCode" placeholder="请输入验证码"><span class="code fr"><img src="images/code.jpg" alt=" "></span></li>
                            <li><button type="button" class="btn">立即登录</button></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

查看全文

相关阅读:
Keil MDK5 硬件仿真之查看变量的值（内附变量值不随程序的运行而刷新的解决办法）
15 Q点稳定的放大电路和基本共集放大电路
 13 H参数等效模型
 12 放大电路的分析方法
 文件处理
 基本数据类型及内置方法
 for循环及字符串操作
 while循环
 用户交互、运算符
 变量与基本数据类型

原文地址：https://www.cnblogs.com/zhanhengzong/p/4936203.html