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 滑动方法slideDown向下滑动元素
Jan 16 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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读取RSS feed的代码
2008/08/01 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python中字符串前面加r的作用
2015/06/04 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python 求10个数的平均数实例
2019/12/16 Python
tensorflow多维张量计算实例
2020/02/11 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
应届生程序员求职信
2013/11/05 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2014年建筑工作总结
2014/11/26 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2016年元旦致辞
2015/08/01 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL