显示文本框隐藏内容

最新推荐文章于 2026-01-06 22:03:14 发布

原创最新推荐文章于 2026-01-06 22:03:14 发布 · 419 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

WEB前端学习专栏收录该内容

5 篇文章

订阅专栏

搜索栏示例

在这里插入图片描述

目的

搜索栏默认显示默认信息，默认颜色#999
当鼠标聚焦时默认信息消失，准备输入,颜色变为#333

在这里插入图片描述

丢失焦点时若搜索栏为空，则显示默认信息，若不为空则保持当前状态，颜色变为#999

显示默认信息

保持当前状态

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示文本框隐藏内容</title>
    <style>
        input{
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        //获取input元素
        var input=document.querySelector("input");
        //聚焦时事件处理函数
        input.onfocus=function(){
            //若value为默认信息"手机"，则设置为空，若已有非默认信息则保持不变
            if(this.value=="手机")
            {
                this.value="";
            }
            //设置字体颜色为#333
            this.style.color="#333";
        }
        //丢失焦点时事件处理函数
        input.onblur=function(){
            //若value为空则显示默认信息，若不为空则保持不变
            if(this.value=="")
            {
                this.value="手机";
            }
            //设置字体颜色为欸#999
            this.style.color="#999";
        }
    </script>
</body>
</html>