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实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
Angularjs 事件指令详细整理
Jul 27 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python+opencv实现动态物体识别
2018/01/09 Python
python递归实现快速排序
2018/08/18 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
学术会议欢迎词
2014/01/09 职场文书
爱心倡议书范文
2014/05/12 职场文书
党员个人对照检查材料
2014/10/01 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技