码迷,mamicode.com
首页 > 其他好文 > 详细

搜索栏简单小案例

时间:2016-10-22 21:02:02      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:2.4   searchbox   value   span   function   获取   判断   提示   script   

<!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>

 

搜索栏简单小案例

标签:2.4   searchbox   value   span   function   获取   判断   提示   script   

原文地址:http://www.cnblogs.com/lsy0403/p/5988115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!