Form.Element.Observer
new Form.Element.Observer(element, frequency, callback)
一个针对指定表单控件的定时观察器。
Form.Element.Observer 使用 Form.Element.getValue() 实现 getValue() 方法。关于定时观察器的描述见 Abstract.TimedObserver。
serialize
serialize(element) -> string
使用 name=value 的格式创建表单控件的 URL 编码字符串。
该方法返回一个适合于 Ajax 请求的字符串。但是,它仅仅只串行化一个单独的元素——如果需要串行化整个表单,请使用 Form.serialize()。
注意
串行化一个已禁用或是没有名称的控件,总是返回空字符串。
如果只是简单的获取元素的值,而不需要进行 Ajax 请求,请使用 getValue()。
select
select(element) -> HTMLElement
选取文本输入框中包含的文本。
译注:该方法其实并未添加到已扩展的表单控件中,所以 $('inputElement').select() 调用的并不是这个方法,而是 JavaScript 原生的 select() 方法。Form.Element.focus() 方法也存在同样的问题。
样例
设置一些搜索框,当它们获得焦点时,自动选择它们的内容。
$('searchbox').onfocus = function() {
Form.Element.select(this)
// 你也可以使用原生的方法,但是那样的话将不会返回元素!如下:
this.select()
}
获取焦点 + 选择内容:使用 activate!
如果表单控件需要获取焦点并选择当前的文本内容,那么使用 activate 方法是一个...
present
present(element) -> boolean
如果一个文本输入框包含内容,返回 true,否则返回 false。
样例
在常规的表单校验中,这个方法非常有用。尝试提交下面的表单,第一次不要填写任何信息,然后键入一些文本,再次提交:
User Details
Please fill out the following fields:
Username
Email Address
$('example').onsubmit = function(){
var valid, msg = $('msg')
// are both fields present?
valid = $(this.username).present() && $(this.email).present()
...
getValue
getValue(element) -> string | array
返回表单控件当前的值。除多选框会返回一个数组外,其它的控件均返回一个字符串。该方法的全局访问捷径是 $F()。
如何通过 name 属性引用表单中的控件?
该方法与其它的 DOM 扩展方法一致,当传入字符串参数时,必须是元素的 ID,而不是名称。 如果想要通过控件的名称引用控件,首先应采用一般的 JavaScript 代码查找控件,然后使用控件节点作为参数来代替字符串参数。
例如,在一个 ID 为 "contact" 的表单中有一个名称为 "company" 的输入框:
var form = $('contact');
var input = form['company'];
Form.Element.getValue(input);
//...
focus
focus(element) -> HTMLElement
设置键盘焦点到指定的元素。
译注:该方法其实并未添加到已扩展的表单控件中,所以 $('inputElement').focus() 调用的并不是这个方法,而是 JavaScript 原生的 focus() 方法。Form.Element.select() 方法也存在同样的问题。
样例
Form.Element.focus('searchbox')
// 与下面一句基本上是等价的,但是下面的语句不会返回表单元素
// 它调用的是原生的 focus() 方法:
$('searchbox').focus()
译注:在 Prototype 1.6.0.3 的源码中,Form.Element 的 focus 和 select 方法将传入的参数 element 直接返回,并未做任何处理,所以若传入的 element 是一个字符串,则返回值...
enable
enable(element) -> HTMLElement
启用一个先前被禁用的表单控件。
样例
请参阅 Form.disable() 方法。
disable
disable(element) -> HTMLElement
禁用表单控件。控件被禁用后,不能再修改它的值,除非再次启用它。
该方法将元素的原生属性 disable 设为 true。你也可以通过这个属性来检查控件的当前状态。
样例
请参阅 Form.disable() 方法。
注意
被禁用的表单控件永远都不会被串行化。
千万不要将禁用表单控件作为一项安全措施,而放弃在服务器端的校验。只需具有少许 JavaScript 经验的用户就可以在任何浏览器上轻易的启用被禁用的控件。你应该将禁用作为一项增强用户体验的措施—— 用它来指示指定的控件在那段时间内不可修改。
...
clear
clear(element) -> HTMLElement
清除一个文本输入框的内容。
样例
如果文本输入框是第一次获得焦点,则清除文本框的内容:
$('some_field').onfocus = function() {
// 如果已经清除过,则什么都不做
if (this._cleared)
return
// 当代码执行时,"this" 关键字指向控件本身
this.clear()
this._cleared = true
}
activate
activate(element) -> HTMLElement
使表单控件获得焦点,如果控件是一个文本输入框,还会选取输入框中的内容。
该方法其实是获取焦点和选择内容两个步骤的组合,因此,下面的两个语句是等价的(只是前一个语句 不会 返回控件本身):
Form.Element.focus('myelement').select() //译注:注意这里调用的是原生的 select 方法
$('myelement').activate()
猜一下哪种调用方式更好?;)
译注:第一个语句执行时会发生错误,原因在于 Form.Element.focus(element) 方法将传入的参数 element 直接返回,并未做任何处理,所以若传入的 element 是一个字符串,则返回值也是一个字符串。 另外,select 方法也存在同样的问...
这是一个用于协助处理表单控件的方法集合。对于表单控件的焦点、串行化、启用/禁用或是获取当前值,它们均提供了相应的处理方法。
在 Prototype 中,Form.Element 也被称为 Field,并且,对于已被扩展(参见 “Prototype 如何扩展 DOM”)的 INPUT、SELECT 和 TEXTAREA 元素,Form.Element 中的所有方法都可以直接使用。因此,下面的语句是等价的:
Form.Element.activate('myfield')
Field.activate('myfield')
$('myfield').activate()
当然,你应该根据应用的场景选择合适而简捷的写法。为支持链式编程,大多数 Form.Element 的方法都返回元素自身(除非明确指出返回类型)。
方法...
<script src="prototype.js"></script>
<form id="frm">
<div id="div1">
<input type="text" id="txt" name="txt" onchange="return alert('Now')"/>
<input type="text" id="txt2" name="txt2" />
<input type="button" id="btn" name="btn"
value="click" onclick="test(event)" />
<input type="submit" />
<a href="http://www.google.com" onclick="test2(event)">Google</a...