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 解疑
Nov 11 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP会话处理的10个函数
2015/08/11 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Python编程之string相关操作实例详解
2017/07/22 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
《美丽的彩虹》教学反思
2014/02/25 职场文书
出国签证在职证明
2014/09/20 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书