jquery实现非叠加式的搜索框提示效果


Posted in Javascript onJanuary 07, 2014

以前一直在用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名、密码来实现提示与用户的输出,这边采用JQUERY在一个INPUT框中实现这种效果,具体做法为:

下面是INPUT框代码:

<input class="search_text" type="text" value="搜索" name="searchText" />

下面是JQUERY代码:
//设置搜索的默认值 
$(".search_text").focus(function(){ 
<span style="white-space:pre"> </span>if($(".search_text").val()=='搜索'){ 
<span style="white-space:pre"> </span>$(".search_text").val(""); 
<span style="white-space:pre"> </span>}else{ 
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val()); 
<span style="white-space:pre"> </span>} 
}); 
$(".search_text").blur(function(){ 
<span style="white-space:pre"> </span>if($(".search_text").val()==''){ 
<span style="white-space:pre"> </span>$(".search_text").val("搜索"); 
<span style="white-space:pre"> </span>}else{ 
<span style="white-space:pre"> </span>$(".search_text").val($(".search_text").val()); 
<span style="white-space:pre"> </span>} 
});

格式神马的我就不调整了,毕竟不是编程中使用的IDE编辑器,有兴趣的话,可以看下哟!
Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 #Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 #Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 #Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 #Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 #Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 #Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
JQuery查找DOM节点的方法
2015/06/11 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
采购主管工作职责
2013/12/12 职场文书
国税会议欢迎词
2014/01/16 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
工作态度检讨书
2014/02/11 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
软件售后服务方案
2014/05/29 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
深入浅析Django MTV模式
2021/09/04 Python