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

来源：互联网发布：手机贴纸淘宝编辑：程序博客网时间：2024/04/30 18:21

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.运行结果

0 0