码迷,mamicode.com
首页 > 其他好文 > 详细

模拟placeholder

时间:2016-09-06 13:40:03      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

<!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

标签:

原文地址:http://www.cnblogs.com/gongshunkai/p/5845297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!