搜索栏简单小案例

Posted 2020-08-15 萧诺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了搜索栏简单小案例相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.获取焦点的事件
            $("#searchBox").focus(function () {
                //1.1 判断文本框的内容是否等于提示内容
                var content = $(this).val();
                //1.2 如果等于 则清空文本框  如果不等于则 保留
                if($.trim(content) == "请输入您的内容..."){
                    $(this).val("");
                }
            });
            //2.失去焦点的事件
            $("#searchBox").blur(function () {
                //2.1 判断文本框的内容是否为空
                var content = $(this).val();
                //2.2 如果为空 则设置为提示文字 否则 保留
                if($.trim(content) == ""){
                    $(this).val("请输入您的内容...");
                }
            });
        });
    </script>
</head>
<body>
<input type="text" name="" value="请输入您的内容..." id="searchBox">
</body>
</html>

以上是关于搜索栏简单小案例的主要内容，如果未能解决你的问题，请参考以下文章