基于jQuery的输入框无值自动显示指定数据的实现代码
更新时间：2011年01月24日 00:03:15 作者：
在自己的网页中，常常要实现指定样式的输入框，当输入框中没有输入或只输入空格等无效信息时，自动显示指定的文本，以提醒用户应该如何操作，下面是具体实现方法，仅供参考。
【解决方案】
1. 准备工作
（1）输入框
<input type="text" name="searchText" title="请输入搜索关键字" />
（2）CSS代码
input.helpText { color: #aaa;}
（3）转换方法
function switchText()
{
if ($(this).val() == $(this).attr('title'))
$(this).val('').removeClass('helpText');
else if ($.trim($(this).val()) == '')
$(this).addClass('helpText').val($(this).attr('title'));
}
（4）具体实现
$('input[type=text][title!=""]').each(function() {
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title'));
if ($(this).val() == $(this).attr('title')) $(this).addClass('helpText');
}).focus(switchText).blur(switchText);
$('form').submit(function() {
$(this).find('input[type=text][title!=""]').each(function() {
if ($(this).val() == $(this).attr('title')) $(this).val('');
});
});
2. 参考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/
1. 准备工作
（1）输入框
复制代码 代码如下:
<input type="text" name="searchText" title="请输入搜索关键字" />
（2）CSS代码
复制代码 代码如下:
input.helpText { color: #aaa;}
（3）转换方法
复制代码 代码如下:
function switchText()
{
if ($(this).val() == $(this).attr('title'))
$(this).val('').removeClass('helpText');
else if ($.trim($(this).val()) == '')
$(this).addClass('helpText').val($(this).attr('title'));
}
（4）具体实现
复制代码 代码如下:
$('input[type=text][title!=""]').each(function() {
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title'));
if ($(this).val() == $(this).attr('title')) $(this).addClass('helpText');
}).focus(switchText).blur(switchText);
$('form').submit(function() {
$(this).find('input[type=text][title!=""]').each(function() {
if ($(this).val() == $(this).attr('title')) $(this).val('');
});
});
2. 参考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/
您可能感兴趣的文章:
- 详解jQuery UI库中文本输入自动补全功能的用法
- jQuery实现文本框邮箱输入自动补全效果
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- jQuery实现感应鼠标动画效果自动伸长的输入框实例
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- jquery判断字符输入个数（数字英文长度记为1，中文记为2，超过长度自动截取）
- jQuery 自动增长的文本输入框实现代码
- jQuery实现自动输入email、时间和域名的方法
相关文章
本篇文章是对Jquery中的LigerUI实现文件上传的方法，进行了分析介绍，需要的朋友可以参考下2013-07-07
在javascript中我们常常要改变dom的css样式 ，同样Jquery也对改变css做了封装不用我们去用 getElementByid().style.……来操作了2010-04-04
JQuery Ajax WebService传递参数的简单实例
下面小编就为大家带来一篇JQuery Ajax WebService传递参数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了jquery.cookie.js用法,结合实例形式较为详细的分析了jquery.cookie.js针对cookie的获取、创建、设置、删除等常用技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了基于jQuery实现文字打印动态效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
昨天写了篇通过jQuery源码学习javascript（一），里面有一个定义对象C的方法，我早期也没有太注意这个方面的技术细节。后来我查了一下资料，发现里面有很多巧的地方。今天与大家分享2012-12-12
这篇jquery入门的文章，确实不错，前提是大家已经对js稍微熟悉一点即可能看懂，非常不错的jquery入门篇文章。2009-12-12
这篇文章主要介绍了jQuery制作简洁的图片轮播效果，代码非常的精简，小伙伴们可以自己美化下，自由扩展。2015-04-04
这篇文章主要介绍了jquery鼠标停止移动事件，有需要的朋友可以参考一下2013-12-12
这篇文章主要介绍了JQuery限制复选框checkbox可选中个数的方法,涉及jQuery操作复选框长度判断与属性修改的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论