模拟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>
个人收藏笔记记录

开通VIP
