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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
JSON 数据格式详解
Sep 13 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代码
2012/06/08 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python中的django是做什么的
2020/07/31 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
C#面试题问题集
2016/04/02 面试题
校园安全检查制度
2014/02/03 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
投资合作协议书范本
2014/04/17 职场文书
安全生产标语
2014/06/06 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Python必备技巧之函数的使用详解
2022/04/04 Python