码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-05-13 00:16:44      阅读:112      评论:0      收藏: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="清除第二个表单控件的输入" 
	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>
</script>
</body>
</html>

3.运行结果

技术分享

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

标签:

原文地址:http://blog.csdn.net/owen_william/article/details/51344714

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!