模拟placeholder

Posted 2020-08-07 codeing or artist ?

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟placeholder相关的知识，希望对你有一定的参考价值。

<!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="text" name="email" placeholder="请输入邮箱">
    </form>

    <script type="text/javascript">
        (function(){
            var elem = document.createElement(‘input‘);
            if(elem.placeholder !== undefined) return;

            var form = document.getElementById(‘form1‘),
                inputs = form.getElementsByTagName(‘input‘),
                i,input,value,type;

            for(i in inputs){
                input = inputs[i];
                type = ‘text‘;

                if(input.type !== ‘text‘ && input.type !== ‘password‘) continue;
                if(input.type === ‘password‘){
                    type = ‘password‘; input.type = ‘text‘;
                }

                value = input.getAttribute(‘placeholder‘);
                input.value = value;

                (function(value,type){
                    input.onfocus = function(){
                        if(this.value === value) this.value = ‘‘;
                        if(type === ‘password‘) this.type = ‘password‘;
                    }
                    input.onblur = function(){
                        if(this.value === ‘‘) this.value = value;
                        if(this.value === value && type === ‘password‘) this.type = ‘text‘;
                        
                    }
                })(value,type);
            }
        })();    
    </script>
</body>
</html>

以上是关于模拟placeholder的主要内容，如果未能解决你的问题，请参考以下文章

模拟placeholder

模拟ie9的placeholder

select标签模拟placeholder属性与一般操作(最重要的是ios某一项被选中的兼容)

js解决IE89下placeholder的兼容问题