jquery搜索框效果，搜索，请输入关键字

最新推荐文章于 2025-07-01 10:18:16 发布

赢在执行

最新推荐文章于 2025-07-01 10:18:16 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： jquery function xhtml javascript html

本文链接：https://blog.youkuaiyun.com/hexytxl/article/details/6728992

Jquery 专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何使用jQuery创建一个搜索框，当用户聚焦输入框时，默认提示文字消失，用户离开输入框且未输入内容时，提示文字重新显示。涉及到的技能包括jQuery选择器、事件处理和样式修改。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>搜索框效果</title>
    <style type="text/css">
        .waiting{ color:Gray;}
    </style>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#kw").val("请输入关键词").addClass("waiting")
            .blur(function () {
                if ($(this).val() == "") {
                    $("#kw").val("请输入关键词").addClass("waiting");
                }
            })
            .focus(function () {
                if ($("#kw").val() == "请输入关键词") {
                    $("#kw").val("").removeClass("waiting");
                }
            });
        });
    </script>
</head>
<body>
<input type="text" id="kw" />
</body>
</html>