javaScript:操作元素-用户名显示隐藏内容(1)

最新推荐文章于 2023-10-17 19:00:00 发布

heitu_

最新推荐文章于 2023-10-17 19:00:00 发布

阅读量239

点赞数

分类专栏： DOM 文章标签：前端 javascript

本文链接：https://blog.csdn.net/heitu_/article/details/128456165

版权

DOM 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

效果："用户名"获得焦点，隐藏默认内容；失去焦点，恢复默认内容；

逻辑：

1.获取input事件源

2.注册事件，绑定点击事件

3.隐藏默认内容，文本框变成粉色；失去焦点，恢复文本框和默认内容

<body>
    <input type="text" value="邮箱/ID/手机号" style="outline:none;"></input>
    <script>
        var text = document.querySelector('input');
        text.onfocus = function(){
            if(this.value === '邮箱/ID/手机号'){
                this.value = ' ';
            }
            this.style.border = '1px solid red';
        }
        text.onblur = function(){
            if(this.value === ' '){
                this.value = '邮箱/ID/手机号';
            }
            this.style.border = '1px solid black';
        }
    </script>
</body>

说明：

1.使用"outline:none"取消input自带的文本样式

2."querySelector"

3."onfocus"获得焦点；"onblur"失去焦点

4.逻辑为：

点击后,如果文本有默认内容，则清空并且文本框变成红色；

点击其他地方，如果文本未输入内容，则恢复默认内容并且文本框变成黑色。