Prototype使用Form.Element操作表单控件

最新推荐文章于 2024-06-24 23:48:34 发布

Owen William

最新推荐文章于 2024-06-24 23:48:34 发布

阅读量1.3k

点赞数

分类专栏： Prototype 文章标签： Prototype web开发 javascript

本文链接：https://blog.csdn.net/owen_william/article/details/51344714

版权

Prototype 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.前言

Form.Element包含了如下几个方法：

1) clear(field):清楚传入field表单控件的值。

2) disable(element):禁用某个表单控件。

3) enable(element):启用某个表单控件。

4) present(field):判断field表单控件是否有值。

5) focus(field):将焦点移动到指定表单控件。

6) select(field)：将焦点移动到指定表单控件。

7) activate(field):同样可用于选中文本框、文本域一样的表单控件，该方法将可选中该表单控件内的文本。

8) getValue():获取指定表单控件的值。

9) serialize(element):返回指定表单控件转换的查询字符串。

2.例子

 <!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> Form.Element对象 </title>
</head>
<body>
<script src="../../prototype.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="www.owen.william"/><br />
<select size="3" id="st1">
	<option>Java</option>
	<option>Java EE</option>
	<option>Ajax</option>
</select><br />
<!-- 单击该按钮将清除第二个文本框的输入 -->
<input type="button" value="清除第二个表单控件的输入" 
	οnclick="Form.Element.clear('text2');"/><br />
<!-- 单击该按钮将校验第一个文本框的输入，
	当第一个文本框有输入时返回true -->
<input type="button" value="校验第一个表单控件的输入" 
	οnclick="alert($('text1').present());"/><br />
<!-- 单击该按钮将会把焦点移到第三个输入框 -->
<input type="button" value="移动焦点到第三个输入框" 
	οnclick="Form.Element.focus('text3');"/><br />
<!-- 单击该按钮将选中第四个文本框内的文字 -->
<input type="button" value="选中第四个文本框的文本" 
	οnclick="Form.Element.select('text4');"/><br />
<!-- 单击该按钮让列表框获得焦点 -->
<input type="button" value="让下拉列表获得焦点" 
	οnclick="$('st1').activate();"/><br />
<!-- 单击该按钮会将第一个文本框的内容转换为查询字符串 -->
<input type="button" value="转换查询字符串" 
	οnclick="alert(Form.Element.serialize('text1'));"/><br />
<!-- 单击该按钮会将返回第一个文本框的值 -->
<input type="button" value="返回第一个表单控件的值" 
	οnclick="alert(Form.Element.getValue('text1'));"/><br />
</body>
</script>
</body>
</html>