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

最新推荐文章于 2022-01-04 15:24:09 发布

最新推荐文章于 2022-01-04 15:24:09 发布 · 367 阅读

文章标签：

#jQuery #CSS #JavaScript #ViewUI

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在网页表单中使用JavaScript处理文本输入控件默认值的方法。通过将label内的提示信息作为输入框的默认值，并在用户交互时动态更新，确保了表单提交时不会包含未修改的默认值。

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