在需要用户输入信息时,在form中的input/textarea等文本输入控件都会在前头有一个文本提示应该输入什么信息,如果留给form的页面位置太少,那么留给输入框的位置就更少了.有很多网站是把这些提示信息显示在输入控件上,当用鼠标点击这些文本输入控件的时候再清空,等待用户输入.参考了一些别人写的东西,自己做了一个示例.
html中的body部分:
<body>
<form action="#" method="post" id="form">
<p>
<label for="username">在此输入姓名</label>
<input type="Text" name="username" id="username" value="" />
</p>
<p>
<label for="password">在此输入验证码</label>
<input type="text" name="password" id="password" value="" />
</p>
<p>
<label for="something">输入一些东西吧</label>
<textarea name="something" id="something" cols="50" rows="4"></textarea>
</p>
<input type="button" onclick="javascript:beforeSubmit();" value="提交前的处理" />
</form>
</body>
input对象和textarea对象都有一个label与之对应,用于设置默认的提示信息.页面初始化时,将label中的信息提取出来显示在对应的对象上,然后将该label隐藏.当用鼠标点击输入对象时,将默认信息清空.对象失去焦点时检查用户是否有数据输入,如果没有数据则恢复默认提示信息.下面是对应的javascript代码:
$(document).ready(function() {
labelOnTip($("#form")); //选择需要处理的页面部分
});
function labelOnTip(container) {
container.find("label").each(function() { //循环container中的每个label
object = document.getElementById($(this).attr("for"));
if($(object).attr("type") == "text" || object.tagName.toLowerCase() == "textarea") {
var text = $(this).text(); //取出label中的值用于恢复默认值
$(this).css("display","none"); //设置label不可见
$(object).val(text).addClass("inactive") //设置输入控件的内容为默认值,设置CSS样式
.removeClass("active onfocuse");
//输入控件获得焦点时设置CSS样式,同时将value设为空接收输入
$(object).focus(function() {
$(this).addClass("onfocuse")
.removeClass("active inactive");
if($(this).val() == text) {
$(this).val("");
}
});
//输入控件焦点释放时,设置CSS样式,检查输入内容是否为空
$(object).blur(function() {
//如果输入内容为空恢复label设置的默认值
if($(this).val() == "") {
$(this).val(text);
$(this).addClass("inactive")
.removeClass("active onfocuse");
} else {
$(this).addClass("active")
.removeClass("inactive onfocuse");
}
});
}
});
}
这样当用户提交该form时,没有输入数据的对象的值是默认值.因此在提交form之前需要对这些输入控件做一些处理.下面是一个简单的处理方法,在提交之前检查输入控件的内容是否同对应label的值相同,若相同则将输入控件中默认数据清空:
function beforeSubmit() {
//在表单提交之前,要将没有输入数值的控件的value属性置为空,
//防止提交对应label中设置的默认显示内容.
$("#form").find("label").each(function() { //循环form中的每个label
object = document.getElementById($(this).attr("for"));
if($(object).attr("type") == "text" || object.tagName.toLowerCase() == "textarea") {
var text = $(this).text(); //取出label中的值用于恢复默认值
if($(object).val() == text) {
$(object).val(""); //value置空
}
alert($(object).attr("name") + ":" + $(object).val());
}
});
}
分享到：
- 2008-10-28 18:37
- 浏览 4600
- 评论(0)
- 论坛回复 / 浏览 (0 / 4705)
- 查看更多
相关推荐
自制的jquery插件，只需要一行代码，即可将select控件变成一个即可以输入也可以选择的元素，输入时也会有智能提示。对原来的select的操作完全没有改变，取值依然是取select的值，设置选中，添加项删除项等等都没有...
1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框内容自动缩进 1.29 禁止页面滚动的...
jQuery的Ajax的自动完成功能允许您轻松地创建自动完成/自动提示框的文本输入字段。它始建集中表现为每一个查询缓存被从本地缓存中相同的重复的查询结果。如果没有特定查询的结果，它停止发送请求到服务器的其他查询...
AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便。
n149 小结n第15章 用jQuery实现客户端Ajax n151 jQuery介绍 n1511 使用jQuery库 n1512 创建jQuery文件 n1513 方法和documentready n1514 jQuery选择器 n152 从客户端调用Web服务 n1521 调用外部的Web服务 n1522 调用...
jQM Autocomplete是一个自动提示相关内容的jQuery Mobile...用户在搜索框输入前几个字母或是汉字的时候，Autocomplete就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户，供用户选择，提供方便。
-使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性）。 -使用Hidden控制Window控件的显示隐藏，Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...
-使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性）。 -使用Hidden控制Window控件的显示隐藏，Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
C#操作缓存的帮助类，实现了怎么设置缓存，怎么取缓存，怎么清理缓存等方法，只需要调用方法就可以实现 CookieHelper C#操作Cookie的帮助类，添加Cookie，删除Cookie，修改Cookie，清理Cookie SessionHelper C#...
AutoTips是为解决应用系统对于【自动提示】的需要(如：Google搜索), 而开发的架构无关的公共控件, 以满足该类需求可以通过快速配置来开发。AutoTips基于搜索引擎Apache Lucene实现。AutoTips提供统一UI。 WAP浏览器...
AutoTips是为解决应用系统对于【自动提示】的需要(如：Google搜索), 而开发的架构无关的公共控件, 以满足该类需求可以通过快速配置来开发。AutoTips基于搜索引擎Apache Lucene实现。AutoTips提供统一UI。 WAP浏览器...
17_2.htm 使用$F()返回表单输入控件的值。 17_3.htm 使用$A()将单个的参数转换成Array对象。 17_4.htm 使用$H()把一些对象转换成Hash对象。 17_5.htm 使用$R()创建新的对象域。 17_6.htm 使用Ajax.Request...
17_2.htm 使用$F()返回表单输入控件的值。 17_3.htm 使用$A()将单个的参数转换成Array对象。 17_4.htm 使用$H()把一些对象转换成Hash对象。 17_5.htm 使用$R()创建新的对象域。 17_6.htm 使用Ajax.Request...