• 模拟placeholder支持ie8以下处理了密码框只读的问题


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form id="form1" action="">
            <input type="text" name="username" placeholder="请输入用户名">
            <input type="password" name="password" placeholder="请输入密码">
            <input type="password" name="password2" placeholder="请确认密码">
            <input type="text" name="email" placeholder="请输入邮箱">
        </form>
    
        <script type="text/javascript">
            (function(){
                //检测是否支持placeholder
                if('placeholder' in document.createElement('input')) return;
    
                var form = document.getElementById('form1'),
                    inputs = form.getElementsByTagName('input'),
                    i,input,value,type;
    
                //获取焦点事件
                var focus = function(value,type){
                    return function(){
                        if(this.value === value) this.value = '';
                        if(this.value === '' && type === 'password'){
                            try {
                                this.type = 'password';
                            }catch(e){
                                this.style.visibility = 'hidden';
                                this.style.position = 'absolute';
                                this.nextSibling.style.visibility = 'visible';
                                this.nextSibling.style.position = 'relative';
                                //定位光标
                                this.nextSibling.focus();
                            }
                        }
                    };
                };
    
                //失去焦点事件
                var blur = function(value,type){
                    return function(){
                        if(this.value === '') this.value = value;
                        if(this.value === value && type === 'password'){
                            try{
                                this.type = 'text';
                            }catch(e){
                                this.style.visibility = 'hidden';
                                this.style.position = 'absolute';
                                this.previousSibling.style.visibility = 'visible';
                                this.previousSibling.style.position = 'relative';
                            }
                        }
                    };
                };
    
                //如果浏览器是ie8以下,则创建一个文本框与密码框切换显示
                var createInput = function(value,type,type2){
                    var tmp = document.createElement('input');
                    tmp.type = type;
                    tmp.name = this.name;
                    tmp.placeholder = value;
                    tmp.value = value;
                    tmp.onfocus = focus(value,type2);
                    tmp.onblur = blur(value,type2);
                    form.insertBefore(tmp,this);
                    this.style.visibility = 'hidden';
                    this.style.position = 'absolute';
                }
    
                for(i=0;i<inputs.length;i++){
                    input = inputs[i];
    
                    //不是文本框跳过
                    if(input.type !== 'text' && input.type !== 'password') continue;
    
                    type = 'text';
                    value = input.getAttribute('placeholder');
    
                    if(input.type === 'password'){
    
                        type = 'password'; //给密码框做一个标记
    
                        //ie8以下input type是只读的
                        try {
                            input.type = 'text';
                        }catch(e){
                            createInput.call(input,value,'text',type);
                            i++;
                        }
                    }
                    
                    input.value = value;
                    input.onfocus = focus(value,type);    
                    input.onblur = blur(value,type);
                }
            })();    
        </script>
    </body>
    </html>
  • 相关阅读:
    教师节快乐!
    来自学长同学分享的学习方法
    刘奕佳: 我的职校新生活 | 班级日常分享
    19级:班级日常分享 | 一天一瞬间
    珍惜、珍爱!
    19级:班级日常分享 | 一天一瞬间
    204787 ,194787 |0001 1131 0001 4226 7035 ![2480 ]
    1-N的自然数中,少了一个,找出这个数 小强斋
    获取某一天之前或者之后多少天的日期 小强斋
    获取某一天之前或者之后多少天的日期 小强斋
  • 原文地址:https://www.cnblogs.com/gongshunkai/p/5845297.html
Copyright © 2020-2023  润新知