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

来源：互联网发布：中银淘宝校园卡申请编辑：程序博客网时间：2024/06/15 04:45

<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来实现登录用户名密码的隐藏

1 3