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检测函数
May 31 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
简单了解JavaScript弹窗实现代码
May 07 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+SqlServer实现分页显示
2006/10/09 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php随机显示图片的简单示例
2014/02/15 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
微信小程序开发探究
2016/12/27 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python矩阵的转置和逆转实例
2018/12/12 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
如何提高python 中for循环的效率
2020/04/15 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
MySQL面试题
2014/01/12 面试题
小学教师师德感言
2014/02/10 职场文书
喝酒检查书范文
2014/02/23 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang