jquery搜索框效果实现方法


Posted in Javascript onJanuary 16, 2015

本文实例讲述了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>

补充说明:有些不完美,如果搜索框原来还有其它样式,当失去焦点时,如果采用例子中的代码,那其它样式也会没了,因为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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
潜说js对象和数组
May 25 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
js表头排序实现方法
Jan 16 #Javascript
js计算任意值之间随机数的方法
Jan 16 #Javascript
jquery事件preventDefault()方法用法实例
Jan 16 #Javascript
jQuery老黄历完整实现方法
Jan 16 #Javascript
jquery中one()方法的用法实例
Jan 16 #Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 #Javascript
用js判断是否为360浏览器的实现代码
Jan 15 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php实现简单加入购物车功能
2017/03/07 PHP
javascript事件问题
2009/09/05 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
pandas值替换方法
2018/07/10 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python 实现二维列表转置
2019/12/02 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python opencv实现图像配准与比较
2021/02/09 Python
ddl,dml和dcl的含义
2016/05/08 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
大学生村官事迹材料
2014/01/21 职场文书
研究生导师评语
2014/12/31 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
护士业务学习心得体会
2016/01/25 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
PHP设计模式(观察者模式)
2021/07/07 PHP
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript