jQuery学习16---搜索文本框效果
2013-06-29 14:13
411 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK"> <title></title> <script src="../jquery-1.8.2.js" type="text/javascript"></script> <style type="text/css"> .black { color:Black; } .gray { color:Gray; } </style> <script type="text/javascript"> $(function() { $("#textSearch").focus(function() { //先判断当前输入框中的文字 if($(this).val() =="请输入搜索关键字") { $(this).val("").attr("class","black"); } }).blur(function() { if($(this).val().length==0 || $(this).val() =="请输入搜索关键字") { $(this).val("请输入搜索关键字").attr("class","gray"); } }); }); </script> </head> <body> <input id="textSearch" type="type" value="请输入搜索关键字" class="gray" /> <input id="btn" type="button" value="搜索"> </body> </html>
相关文章推荐
- JqueryUI AutoComplate实现文本框搜索,自动补全效果
- jquery学习第一天:隔行变色、文本框聚焦清空、展示收缩效果
- jQuery学习之旅 Item9 动画效果
- Jquery学习笔记:操作form表单元素之一(文本框和下拉框)
- jQuery学习教程七: jQuery 效果 - 动画 animate
- jQuery实现input文本框内灰色提示文本效果 和 input标签获取焦点是文本框内提示信息清空
- jquery.autocomplete.js 文本框自动填充 类似百度搜索引擎效果
- JQuery学习笔记(二):jQuery 效果
- jQuery 学习6 操纵元素显示效果的函数
- jQuery实现文本框邮箱输入自动补全效果
- jQuery入门学习之实现滑动效果:slideUp()和slideDown()小总结
- JQuery学习5——级联下拉框效果
- jQuery实现搜索框智能提示效果
- learning jQuery 学习笔记七(+jQuery 1.4.1 API)-- 效果-修改内联CSS
- jQuery学习之---效果
- jQuery学习_动作效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
- jQuery表单input文本框默认说明文字获得焦点后消失效果
- 黑马程序员之jquery学习笔记:jquery特效之金额文本框代码
- jQuery 学习笔记之十五 图片切换效果
- Android文本框实现搜索和清空效果