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 相关文章推荐
Json和Jsonp理论实例代码详解
Nov 15 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Angular8 简单表单验证的实现示例
Jun 03 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下escape解码函数的实现方法
2010/08/08 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
材料员岗位职责
2014/03/13 职场文书
老师对学生的评语
2014/04/18 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
初中教师业务学习材料
2014/05/12 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python