jquery实现非叠加式的搜索框提示效果
更新时间：2014年01月07日 16:26:39 作者：
用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名、密码来实现提示与用户的输出，使用jquery在一个INPUT框中即可实现
以前一直在用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编辑器，有兴趣的话，可以看下哟！
下面是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编辑器，有兴趣的话，可以看下哟！
您可能感兴趣的文章:
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- Jquery实现搜索框提示功能示例代码
- jquery+php实现搜索框自动提示
- jquery 模拟类搜索框自动完成搜索提示功能(改进)
- jQuery 插件仿百度搜索框智能提示(带Value值)
- 利用JQuery为搜索栏增加tag提示
- Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- asp.net使用jquery实现搜索框默认提示功能
- 基于jQueryUI和Corethink实现百度的搜索提示功能
- jQuery实现模拟搜索引擎的智能提示功能简单示例
相关文章
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
接了个项目做，需要是这样的：输入手机号，实时判断输入的手机号是否符合规则，如果不符合怎么处理，符合又怎么处理等一系列问题，本篇文章给大家介绍Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态，感兴趣的朋友参考下2015-11-11
两个运算符虽然比较相似，其实区别还是非常大的，虽然不难区别，但是对于初学者可能稍有困扰，下面就简单介绍一下它们两者的区别，希望对需要的朋友有所帮助2014-01-01
这篇文章主要介绍了jQuery的animate动画方法及动画排队问题解决的相关资料，帮助大家更好的理解和学习使用jQuery，感兴趣的朋友可以了解下2021-05-05
仿中关村在线首页弹出式广告插件(jQuery版) ，需要的朋友可以参考下2012-05-05
jQuery DataTables插件自定义Ajax分页实例解析
这篇文章主要为大家详细介绍了jQuery DataTables插件自定义Ajax分页的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
基于jquery的web页面日期格式化插件，需要的朋友可以参考下。2011-11-11
这篇文章主要介绍了jquery实现未经美化的简洁TAB菜单效果,涉及jquery鼠标click事件实现页面元素样式动态变换的功能,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jquery实现不同大小浏览器使用不同的css样式表的方法,需要的朋友可以参考下2014-04-04
本文对jQuery的Cookie插件的使用方法和具体实例进行系统介绍,有需要的朋友可以看下2016-11-11
下面小编就为大家分享一篇jquery中done和then的区别(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
最新评论