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

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

时间: 2024-12-15 05:50:01

Prototype使用Form.Element操作表单控件的相关文章

JQuery操作表单控件

1.jquery操作radio <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js">    </script> <title></title> <!-- jquery判断哪个radio被选中  --> <script type="text/javascript">

Flutter Form表单控件超全总结

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Form.FormField.TextFormField是表单相关控件,类似于H5中form. FormField FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField. TextFormField TextFormField继承自FormField,是一个

仿苹果电脑任务栏菜单&amp;&amp;拼图小游戏&amp;&amp;模拟表单控件

<!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> <meta http-equiv="Content-

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别 相同

表单控件使用

表单控件使用 <span style="font-family:Microsoft YaHei;"><!--百度搜索:自信的尘埃 2014/12/29--> <html> <meta charset="UTF-8"/> <head>     <title>表单元素</title> </head> <body>     <form action="

Bootstrap关于表单控件(按扭)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

表单控件+下拉列表+文本域

一.表单控件 1.<input type="text" name="user"  size="20默认" /> 2.<input type="password" name="code"  /> 3.<input type="radio" name="sex[]" value="1" />+<input ty

Bootstrap_表单_表单控件

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”. <form role=&quo

常用的一些表单控件

表单:用于显示 收集信息,并提交信息到服务器)1.表单元素 <form ></form> 主要属性:action: 当提交表单时,向何处发送表单数据,属性值为一个URL method:使用什么方式将表单数据发送到action属性所规定的页面(get post) enctype:表单数据进行编码的方式 name:表单名称2.表单控件: (1).<input>元素用于收集用户信息,为单标记. 主要属性: type:根据不同的type属性值,可以创建各种类型的输入字段 val