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 lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
微信小程序实现登录注册功能
Dec 29 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
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
php集成开发环境详解
2019/09/24 PHP
Javascript模板技术
2007/04/27 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
电子商务应届生求职信
2013/11/16 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
大学生活动策划方案
2014/02/10 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers