jquery搜索框效果实现方法
更新时间：2015年01月16日 11:35:13 投稿：shichen2014
这篇文章主要介绍了jquery搜索框效果实现方法,分析了jquery搜索框效果的实现技巧及注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
$('#search').val("").addClass("c2");
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").attr("class","c1");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
$('#search').val("").addClass("c2");
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").attr("class","c1");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
补充说明：有些不完美，如果搜索框原来还有其它样式，当失去焦点时，如果采用例子中的代码，那其它样式也会没了，因为attr()为设置样式。如果采用addClass()为追加样式，也不怎么合适，虽然能达到效果，但原来的c2样式还在，显示时被c1样式替换而已（这需要c1样式写在c2后面）。好像没有替换样式的方法？
修改后解决上面的问题，较完美版本（代码还可以优化更简单）
复制代码 代码如下:
<html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
if($('#search').val()=="请输入搜索内容"){
$('#search').val("").addClass("c2").removeClass("c1");
}
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").addClass("c1").removeClass("c2");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
if($('#search').val()=="请输入搜索内容"){
$('#search').val("").addClass("c2").removeClass("c1");
}
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").addClass("c1").removeClass("c2");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
JQuery一种取同级值的方式(比如你在GridView中)
JQuery一种取同级值的方式 比如你在GridView中,实现代码如下，需要的朋友可以参考下2012-03-03
这篇文章主要介绍了jquery数组过滤筛选方法grep()简介,需要的朋友可以参考下2014-06-06
鼠标拖动实现DIV排序的教程有很多，在本文将为大家详细介绍个不错的示例，对比传统的排序，这是一个很不错的尝试2013-10-10
这篇文章主要介绍了jQuery()方法的第二个参数的使用方法，十分的简单，有需要的小伙伴可以参考下。2015-04-04
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
这篇文章主要介绍了Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击。需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
需要设置宽度为整个浏览器宽度的div，当然我们可以使用相对布局的方式做到这一点，下面是具体实现，大家可以参考下2014-06-06
下面是关于jquery异步跨域访问的简单实例，需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了基于jquery实现省市联动特效，感兴趣的小伙伴们可以参考一下2015-12-12
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
这篇文章主要是对JQueryiframe页面操作父页面中的元素与方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
今天在修整博客侧栏信息时，利用到了Tab选项卡方式，因为ZBlog封装的是JQuery库，所以很自然地就想到了IdTabs。2010-09-09
最新评论