首页 > 代码库 > 搜索栏简单小案例

搜索栏简单小案例

2024-08-17 11:59:44   219人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.mamicode.com/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="http://www.mamicode.com/请输入您的内容..." id="searchBox">
</body>
</html>

 

搜索栏简单小案例


联系
我们