js搜索框

最新推荐文章于 2025-06-15 18:50:27 发布

yangtz_1999

最新推荐文章于 2025-06-15 18:50:27 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Young_Fee/article/details/79041187

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现输入框占位符效果的方法。当输入框获得焦点时，占位文本消失；当输入框失去焦点且为空时，占位文本重新出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

直接上代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gg{
            color: gray;
        }
        .bb{
            color: black;
        }
    </style>
</head>
<body>
<!--<!–<input type="text" placeholder="请输入内容" />–>  /*下面代码实现这个功能*/-->

<input type="text" class="gg" value="请输入内容" onfocus="Focus(this);" onblur="Blur(this);" />

<script>
    function Focus(ths){//焦点事件
        //查找
        ths.className = "bb";
        var current_val = ths.value;
        if(current_val == "请输入内容"){
            ths.value = "";
        }
    }
    function Blur(ths){//失去焦点
        var current_val = ths.value;
        if(current_val=='请输入内容' || current_val.trim().length == 0){
            ths.value = '请输入内容';
            ths.className = 'gg';
        }
    }
</script>

</body>
</html>