Prototype中使用ObjectRange和Form.Element操作表单

最新推荐文章于 2025-06-23 22:08:21 发布

原创最新推荐文章于 2025-06-23 22:08:21 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #JavaScript #XHTML #Ajax #HTML #ViewUI

Prototype 专栏收录该内容

15 篇文章

订阅专栏

本文通过实例展示了Prototype.js中的ObjectRange对象用法，包括创建、编辑、转换等操作，并介绍了如何利用Form.Element对象来操作HTML表单元素，如清除输入、获取焦点、选择文本等。

先看ObjectRange的应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>ObjectRange</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			//创建一个ObjectRange对象
			var range = new ObjectRange(2, 9, true);
			//编辑ObjectRange对象的元素
			range.each(function(ele, index) {
				document.writeln("索引" + index + "处的值为：" + ele + "<br />");
			});
			//使用$R()函数创建一个ObjectRange对象
			var ra = $R('a', 'e');
			//将ObjectRange转换为数组
			document.writeln($A(ra));
			//判断该ObjectRange里是否包含'b'
			alert(ra.include('b'));
		</script>
	</body>
</html>

下面是Form.Element操作表单的程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Form.Element对象</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	</head>
	<body>
		<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
		<!-- 下面定义四个单行文本框，用于被下面的按钮事件操作 -->
		<input id="text1" name="text1" type="text" />
		<br />
		<input id="text2" type="text" />
		<br />
		<input id="text3" type="text" />
		<br />
		<input id="text4" type="text" value="crayjava.org" />
		<br />
		<select size="3" id="st1">
			<option>
				Java
			</option>
			<option>
				Java EE
			</option>
			<option>
				Ajax
			</option>
		</select>
		<br />
		<!-- 单击该按钮将清除第二个文本框的输入 -->
		<input type="button" value="清除第二个表单控件的输入"
			onclick="Form.Element.clear('text2');" />
		<br />
		<!-- 单击该按钮将校验第一个文本框的输入，
		当第一个文本框有输入时返回true -->
		<input type="button" value="校验第一个表单控件的输入"
			onclick="alert($('text1').present());" />
		<br />
		<!-- 单击该按钮将会把焦点移到第三个输入框 -->
		<input type="button" value="移动焦点到第三个输入框"
			onclick="Form.Element.focus('text3');" />
		<br />
		<!-- 单击该按钮将选中第四个文本框内的文字 -->
		<input type="button" value="选中第四个文本框的文本"
			onclick="Form.Element.select('text4');" />
		<br />
		<!-- 单击该按钮让列表框获得焦点 -->
		<input type="button" value="让下拉列表获得焦点" onclick="$('st1').activate();" />
		<br />
		<!-- 单击该按钮会将第一个文本框的内容转换为查询字符串 -->
		<input type="button" value="转换查询字符串" onclick="alert(Form.Element.serialize('text1'));"/>
		<br />
		<!-- 单击该按钮会将返回第一个文本框的值 -->
		<input type="button" value="返回第一个表单控件的值"
			onclick="alert(Form.Element.getValue('text1'));" />
		<br />
	</body>
</html>