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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
js查找父节点的简单方法
Jun 28 Javascript
两个Javascript小tip资料
Nov 23 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
layui关闭层级、简单监听的实例
Sep 06 Javascript
Vue插件之滑动验证码
Sep 21 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之第六天
2006/10/09 PHP
15种PHP Encoder的比较
2007/04/17 PHP
phpize的深入理解
2013/06/03 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
英国在线药房:Express Chemist
2019/03/28 全球购物
自我评价范文分享
2014/01/04 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014年民政工作总结
2014/11/26 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
安全生产协议书
2016/03/22 职场文书