JQuery搜索文本框

最新推荐文章于 2020-02-06 22:44:43 发布

又很可爱_521

最新推荐文章于 2020-02-06 22:44:43 发布

阅读量1.3k

点赞数

分类专栏： JQuery 文章标签：郭贝贝的博客编程 JQuery 搜索文本框

本文链接：https://blog.youkuaiyun.com/Guobeibei_123/article/details/80760000

版权

JQuery 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何利用JQuery实现一个搜索文本框，当鼠标点击文本框时，预设的默认内容会消失，允许用户输入新的内容。提供了一个具体的代码示例来展示这种功能的实现。

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

搜索文本框，文本框中可以输入内容，文本框中有默认的内容，鼠标点进去文本框中内容消失，清除文本框中的内容显示默认的内容：具体如下：

文本框中的默认内容：

在文本框中输入内容：

具体代码：

<html>
<head>
    <script src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //focus当元素获得焦点时，触发 focus 事件可以通过鼠标点击或者键盘上的TAB导航触发。
            $("#txt_name").focus(function () {
                //首先清空文本框中的内容
                $(this).val("");
                //先判断当前输入框中的文字  
                if ($(this).val() == "请输入搜索关键字:") {
                    $(this).val("").attr("class");
                }
                //blur:当元素失去焦点时触发 blur 事件。既可以是鼠标行为，也可以是按tab键离开的
            }).blur(function () {
                //判断文本框的个数是否为零，然后判断获取的值
                if ($(this).val().length == 0 || $(this).val() == "请输入搜索关键字:") {
                    $(this).val("请输入搜索关键字:").attr("class");
                }
            });
        });
    </script>
</head>
<body>
搜索文本框中的内容：<input id="txt_name" type="text" value="请输入搜索关键字：" class="name"/>
    <input id="butn_lgin" type="button" value="搜索"/>
</body>
</html>