js世界佳缘用户名显示隐藏内容 pink老师

泰兰德语风

已于 2022-02-04 22:12:01 修改

阅读量583

点赞数 2

文章标签： javascript 前端开发语言

于 2022-02-04 22:04:55 首次发布

本文链接：https://blog.csdn.net/qq_44874089/article/details/122786319

版权

在这里插入代码片
```<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           
            .box {
                margin: 100px 200px;
            }

            .ipt {
                color: gray;
                border: 5px solid green;
            }

            .focus {
                color: black;
                border: 5px solid pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="text" value='邮箱/ID/手机号' class="ipt" />
        </div>
        <script>
            var ipt = document.querySelector('.ipt');
            ipt.onfocus = function() {
                if (this.value == '邮箱/ID/手机号') {
                    this.value = '';
                }
                ipt.className = 'focus';
                this.style.outline = 'none';
            }
            ipt.onblur = function() {
                if (this.value == '') {
                    this.value = '邮箱/ID/手机号';
                }
                ipt.className = 'ipt';
            }
        </script>
    </body>
</html>