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匿名函数的问题分析
Mar 30 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
浅析javascript 定时器
Dec 23 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
使用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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python内存映射文件读写方式
2020/04/24 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
在线服装零售商:SheIn
2016/07/22 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
大型营销活动计划书
2014/04/28 职场文书
中职生自荐信范文
2014/06/15 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
公司股份合作协议书
2014/12/07 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers