在需要用户输入信息时,在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
- 浏览 4649
- 评论(0)
- 论坛回复 / 浏览 (0 / 4768)
- 查看更多
相关推荐
1. jQuery插件intellSeach.js:intellSeach.js是一个基于jQuery的智能提示控件,专门用于提高用户输入体验,实现站内搜索时的即时智能提示功能,类似于百度搜索的即时提示效果。 2. 需求分析:在开发人事管理系统等...
jQuery Masked Input插件就是这样一个工具,它允许开发者为文本输入框设定特定的格式,如金额、时间、秒和毫秒等,使得用户在输入时可以得到实时的反馈和提示。本文将深入探讨jQuery Masked Input插件的使用方法和...
除了标准的文本输入控件,开发者还可以自定义更符合应用需求的控件,例如带有清除按钮的输入框、带有提示信息的输入框等。这通常需要结合HTML、CSS和JavaScript来实现。 9. ARIA(Accessible Rich Internet ...
【基于Jquery的文本提示控件 poshytip】 在网页设计和开发中,文本提示控件(Tooltip)是一种常见的交互元素,它可以在鼠标悬停在某个元素上时显示额外的信息,增强用户体验。Poshytip是一款基于jQuery的轻量级、...
"jQuery验证控件"是将jQuery与表单验证功能相结合的一种实现方式,旨在提供更灵活、用户友好的验证体验。 jQuery验证控件通常包括以下核心组件和特性: 1. **验证插件**:jQuery提供了许多验证插件,如jQuery ...
标题"输入textbox控件只能输入数字"所描述的问题就是如何在TextBox控件中实现这个功能,确保用户只能输入数字,防止输入其他字符,这在诸如数据录入、年龄验证等场景中尤为常见。 要实现这一目标,开发者可以采用...
水印图片可以作为输入框的默认提示文本,当用户聚焦或输入内容时自动消失。创建水印图片通常涉及到背景透明度、定位和CSS样式的设计。 **存储过程**是SQL Server中预编译的SQL语句集合,它们提供性能优化、减少网络...
使用`.show()`和`.hide()`方法控制提示框的可见性,`.text()`设置提示文本。 4. **自定义验证规则** 开发者可以使用`$.validator.addMethod()`添加自定义验证规则。例如,定义一个检查密码强度的方法,结合提示...
在这个场景下,我们可以利用 `jQuery` 来实现一个简单的日期输入格式化控件,确保用户输入的日期符合预设的格式,例如 "年-月-日"。 首先,我们需要一个 HTML 输入框来让用户输入日期。在示例中,我们给这个输入框...
LigerUI是一个强大的前端开发框架,它以jQuery为基础,提供了丰富的UI控件,旨在帮助开发者快速构建具有专业外观和统一风格的Web应用界面。LigerUI的控件集包括了表单元素、布局管理器、数据表格等多种常用组件,极...
TextBox是ASP.NET Web Forms中最基本的输入控件,用于接收用户的文本输入。默认情况下,它为空,但我们可以设置它的Text属性来显示默认的提示文字。然而,这种默认的提示文字在页面加载时始终可见,无法在用户交互时...
`jQuery autocomplete` 是jQuery UI库中的一个组件,它为输入框提供了自动完成的功能,能够根据用户输入的文本动态地从服务器获取并显示建议的匹配项。这个功能对于提高用户体验,特别是处理大量数据时,如搜索或者...
在IT行业中,日历式日期输入控件是一种常见的用户界面元素,它允许用户通过日历视图选择日期,而非仅依赖文本输入。这种控件在许多应用和网站中都有广泛的应用,例如在线预订系统、日程管理软件以及各种表单填写场景...
本资源“基于jquery实现的页面右下角的反馈控件脚本.zip”提供了一个利用JavaScript库jQuery构建的反馈功能,使得用户可以方便地在页面的右下角进行互动,提交他们的意见或问题。 jQuery是一个广泛使用的JavaScript...
Autocomplete 控件的核心在于监听用户的输入事件,然后根据输入的文本向服务器发送请求,获取匹配的数据。返回的数据可以是 JSON 格式,然后由 Autocomplete 插件解析并展示在输入框下方的列表中。用户可以选择列表...
`textarea`是一个多行文本输入控件,常用于收集用户的大段文本输入。它的属性如`rows`和`cols`分别定义了显示的行数和列数,而`maxlength`属性则可以限制用户输入的最大字符数,但这个属性并不检查文本的实际长度,...
为了解决这个问题,开发者通常会使用JavaScript或者一些前端框架(如jQuery、Vue.js、React等)来增强这个元素,使其同时具备文本输入的能力。 实现“可文本输入的下拉框”有多种方法。一种常见的方法是创建一个...
描述中提到的"jquery.autocomplete.min.js插件 仿google实现自动补全"是指使用jQuery UI库中的Autocomplete组件,这是一个轻量级的插件,用于实现文本输入框的自动补全功能。Google的搜索框就具有这种特性,当用户在...
在focus事件中,函数会检查输入框内容是否为空,根据参数设置相应提示文本和样式。在blur事件中,函数会检查输入内容是否符合要求,并给出相应的验证结果。 需要注意的是,在实际开发过程中,表单验证的具体实现...
自制的jquery插件,只需要一行代码,即可将select控件变成一个即可以输入也可以选择的元素,输入时也会有智能提示。对原来的select的操作完全没有改变,取值依然是取select的值,设置选中,添加项删除项等等都没有...