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 相关文章推荐
javascript中获取下个月一号,是星期几
Jun 01 Javascript
js获取class的所有元素
Mar 28 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
JS重学系列之聊聊new操作符
Mar 04 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中常见数据类型的汇总分享
2014/01/06 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
wxPython之解决闪烁的问题
2018/01/15 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python class的继承方法代码实例
2020/02/14 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python导入库的具体方法
2020/06/18 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
出纳岗位职责
2013/11/09 职场文书
卖车协议书
2014/04/21 职场文书
会计演讲稿范文
2014/05/23 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
师德承诺书
2015/01/20 职场文书
创先争优承诺书
2015/01/20 职场文书
综合素质自我评价评语
2015/03/06 职场文书
个人借条范本
2015/05/25 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Go 语言结构实例分析
2021/07/04 Golang