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 Ext JS 状态默认存储时间
Feb 15 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
犀利的js 函数集合
2009/06/11 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
python正则实现提取电话功能
2018/02/24 Python
python的等深分箱实例
2019/11/22 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
python复合条件下的字典排序
2020/12/18 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
2015年招生工作总结
2015/05/04 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript