placeholder和json两种实现登录隐藏的方法

最新推荐文章于 2023-06-28 22:05:26 发布

老孟CIN

最新推荐文章于 2023-06-28 22:05:26 发布

阅读量1.3k

点赞数 1

分类专栏： Json JS技术文章标签： json placeholder

本文链接：https://blog.csdn.net/chickencin/article/details/38294557

版权

JS技术同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Json

3 篇文章 0 订阅

订阅专栏

<head>
    <title>
        placeholder和json两种实现登录隐藏的方法
    </title>
    <script type="text/javascript">
        //判断浏览器是否支持 placeholder属性  
        function isPlaceholder() {
            var input = document.createElement('input');
            return 'placeholder' in input;
        }

        if (!isPlaceholder()) { //不支持placeholder 用jquery来完成  
            $(document).ready(function() {
                if (!isPlaceholder()) {
                    $("input").not("input[type='password']").each( //把input绑定事件 排除password框  
                    function() {
                        if ($(this).val() == "" && $(this).attr("placeholder") != "") {
                            $(this).val($(this).attr("placeholder"));
                            $(this).focus(function() {
                                if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
                            });
                            $(this).blur(function() {
                                if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
                            });
                        }
                    });
                    //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换  
                    var pwdField = $("input[type=password]");
                    var pwdVal = pwdField.attr('placeholder');
                    pwdField.after('<input class="password" id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" />');
                    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();
                        }
                    });

                }
            });

        }
    </script>
</head>
<body>
    <input class="username" placeholder="用户名" type="text" id="accountId" name="operId"
    maxlength="20" style="ime-mode:disabled;" />
    </br>
    <input class="password" placeholder="密码" type="password" id="pwdId" name="pwd"
    maxlength="20" style="ime-mode:disabled;" />
</body>

placeholder和json两种实现登录隐藏的方法,当浏览器不支持placeholder时，可以用json来实现登录用户名密码的隐藏