`
sdcyst
  • 浏览: 59016 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

为输入控件设置提示文本(jquery实现)

阅读更多

    在需要用户输入信息时,在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());
			}
		});
	}
 

 

分享到:
评论

相关推荐

    基于jquery实现智能提示控件intellSeach.js

    1. jQuery插件intellSeach.js:intellSeach.js是一个基于jQuery的智能提示控件,专门用于提高用户输入体验,实现站内搜索时的即时智能提示功能,类似于百度搜索的即时提示效果。 2. 需求分析:在开发人事管理系统等...

    jquery.maskedinput 自定义输入格式,金额,时间,秒,毫秒控件

    jQuery Masked Input插件就是这样一个工具,它允许开发者为文本输入框设定特定的格式,如金额、时间、秒和毫秒等,使得用户在输入时可以得到实时的反馈和提示。本文将深入探讨jQuery Masked Input插件的使用方法和...

    文本输入控件应用.rar

    除了标准的文本输入控件,开发者还可以自定义更符合应用需求的控件,例如带有清除按钮的输入框、带有提示信息的输入框等。这通常需要结合HTML、CSS和JavaScript来实现。 9. ARIA(Accessible Rich Internet ...

    基于Jquery的文本提示控件 poshytip

    【基于Jquery的文本提示控件 poshytip】 在网页设计和开发中,文本提示控件(Tooltip)是一种常见的交互元素,它可以在鼠标悬停在某个元素上时显示额外的信息,增强用户体验。Poshytip是一款基于jQuery的轻量级、...

    jQuery 验证控件

    "jQuery验证控件"是将jQuery与表单验证功能相结合的一种实现方式,旨在提供更灵活、用户友好的验证体验。 jQuery验证控件通常包括以下核心组件和特性: 1. **验证插件**:jQuery提供了许多验证插件,如jQuery ...

    输入textbox控件只能输入数字

    标题"输入textbox控件只能输入数字"所描述的问题就是如何在TextBox控件中实现这个功能,确保用户只能输入数字,防止输入其他字符,这在诸如数据录入、年龄验证等场景中尤为常见。 要实现这一目标,开发者可以采用...

    ASP.NET分页、水印图片、存储过程、分页用户控件、Ajax、JQuery

    水印图片可以作为输入框的默认提示文本,当用户聚焦或输入内容时自动消失。创建水印图片通常涉及到背景透明度、定位和CSS样式的设计。 **存储过程**是SQL Server中预编译的SQL语句集合,它们提供性能优化、减少网络...

    Jquery 表单验证控件(tip提示效果).zip

    使用`.show()`和`.hide()`方法控制提示框的可见性,`.text()`设置提示文本。 4. **自定义验证规则** 开发者可以使用`$.validator.addMethod()`添加自定义验证规则。例如,定义一个检查密码强度的方法,结合提示...

    jQuery实现简单的日期输入格式化控件

    在这个场景下,我们可以利用 `jQuery` 来实现一个简单的日期输入格式化控件,确保用户输入的日期符合预设的格式,例如 "年-月-日"。 首先,我们需要一个 HTML 输入框来让用户输入日期。在示例中,我们给这个输入框...

    LigerUI是基于jQuery开发的一系列控件组

    LigerUI是一个强大的前端开发框架,它以jQuery为基础,提供了丰富的UI控件,旨在帮助开发者快速构建具有专业外观和统一风格的Web应用界面。LigerUI的控件集包括了表单元素、布局管理器、数据表格等多种常用组件,极...

    asp.net后台实现文本框提示文字

    TextBox是ASP.NET Web Forms中最基本的输入控件,用于接收用户的文本输入。默认情况下,它为空,但我们可以设置它的Text属性来显示默认的提示文字。然而,这种默认的提示文字在页面加载时始终可见,无法在用户交互时...

    JQuery autocomplete Ajax分页控件

    `jQuery autocomplete` 是jQuery UI库中的一个组件,它为输入框提供了自动完成的功能,能够根据用户输入的文本动态地从服务器获取并显示建议的匹配项。这个功能对于提高用户体验,特别是处理大量数据时,如搜索或者...

    最精致的日历式日期输入控件

    在IT行业中,日历式日期输入控件是一种常见的用户界面元素,它允许用户通过日历视图选择日期,而非仅依赖文本输入。这种控件在许多应用和网站中都有广泛的应用,例如在线预订系统、日程管理软件以及各种表单填写场景...

    基于jquery实现的页面右下角的反馈控件脚本.zip

    本资源“基于jquery实现的页面右下角的反馈控件脚本.zip”提供了一个利用JavaScript库jQuery构建的反馈功能,使得用户可以方便地在页面的右下角进行互动,提交他们的意见或问题。 jQuery是一个广泛使用的JavaScript...

    jquery autocomplete 控件

    Autocomplete 控件的核心在于监听用户的输入事件,然后根据输入的文本向服务器发送请求,获取匹配的数据。返回的数据可以是 JSON 格式,然后由 Autocomplete 插件解析并展示在输入框下方的列表中。用户可以选择列表...

    jquery对textarea的长度进行验证

    `textarea`是一个多行文本输入控件,常用于收集用户的大段文本输入。它的属性如`rows`和`cols`分别定义了显示的行数和列数,而`maxlength`属性则可以限制用户输入的最大字符数,但这个属性并不检查文本的实际长度,...

    可文本输入的下拉框select

    为了解决这个问题,开发者通常会使用JavaScript或者一些前端框架(如jQuery、Vue.js、React等)来增强这个元素,使其同时具备文本输入的能力。 实现“可文本输入的下拉框”有多种方法。一种常见的方法是创建一个...

    .net+jquery仿google智能提示

    描述中提到的"jquery.autocomplete.min.js插件 仿google实现自动补全"是指使用jQuery UI库中的Autocomplete组件,这是一个轻量级的插件,用于实现文本输入框的自动补全功能。Google的搜索框就具有这种特性,当用户在...

    jQuery 表单验证扩展(三)

    在focus事件中,函数会检查输入框内容是否为空,根据参数设置相应提示文本和样式。在blur事件中,函数会检查输入内容是否符合要求,并给出相应的验证结果。 需要注意的是,在实际开发过程中,表单验证的具体实现...

    使select可以输入

    自制的jquery插件,只需要一行代码,即可将select控件变成一个即可以输入也可以选择的元素,输入时也会有智能提示。对原来的select的操作完全没有改变,取值依然是取select的值,设置选中,添加项删除项等等都没有...

Global site tag (gtag.js) - Google Analytics