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 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
德劲1104的电路分析与改良
2021/03/01 无线电
PHP高自定义性安全验证码代码
2011/11/27 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
phpinfo的知识点总结
2019/10/10 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
wxpython绘制音频效果
2019/11/18 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
酒店总经理岗位职责
2014/03/17 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
乒乓球比赛通知
2015/04/27 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB