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加解密功能页面
Dec 12 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
js实现滚动条自动滚动
Dec 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
js活用事件触发对象动作
2008/08/10 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
python实现excel读写数据
2021/03/02 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
windows下python安装小白入门教程
2018/09/18 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
竞选班长自荐书范文
2014/03/09 职场文书
大学生自我鉴定书
2014/03/24 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
离婚民事起诉状
2015/08/03 职场文书
七年级数学教学反思
2016/02/17 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫