表单脚本

表单的基础知识

在HTML中,表单由< form >元素来表示,而在JavaScript中,表单对应的则是HTMLFormElement类型。其有以下独有的属性和方法:

  • acceptCharset:服务器能够处理的字符集。
  • action:接受请求的URL;等价于HTML中的action特性
  • elements:表单中所有控件的集合。
  • method:要发送的HTTP请求类型,通常是“get”或“post”
  • reset();将所有表单域重置为默认值
  • submit():提交表单
  • target:用于发送请求和接受响应的窗口名称。

取得from元素的方式有多种,常见的方法有document.getElementById(“form1”)和document.forms[“form1”]。

提交表单

使用< input >和< button >都可以定义提交按钮,只要将其type特性的值设置为“submit”即可,而图像按钮则通过将< input >的type特性值设置为“image”来定义的。因此我们只要点击相应的按钮,就可以提交表单。这样,我们既有机会验证表单数据,并决定是否允许表单提交。如下:

1
2
3
4
5
6
7
8
9
var form = document.getElementById("myForm");
EventUtil.addHandler(form,"submit",function(event){
event = EventUtil.getEvent(event);

//阻止默认事件
EventUtil.preventDefault(event);
});

form.submit(); //以这种方式提交表单是不会触发“submit”事件,因此事先要先验证表单数据

此外,还可能出现用户重复提交表单。解决问题的方法有两个:

  1. 在第一次提交表单后就禁用提交按钮
  2. 利用onsubmit事件处理程序取消后序的表单提交操作。

重置表单

在用户单击重置按钮时,表单会被重置。使用type特性值为“reset”的< input >或< button >都可以创建重置按钮。此方法同样会触发“reset”事件,可以通过监听此时间,取消重置。此外,调用reset()方法也会触发reset事件,这与submit()方法不同。

表单字段

每个表单都有elements属性,该属性是表单中素有表单元素(字段)的集合。每个表单字段在elements集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和name特性来访问它们。
共有的表单字段属性、方法和事件有:

  • disabled:布尔值,表示当前字段是否被禁用
  • form:指向当前字段所属表单的指针;只读。
  • name:当前字段的名称
  • readOnly:布尔值,表示当前字段是否只读。
  • tabIndex:表示当前字段的切换序号。
  • type: 当前字段的类型,如“checkbox”等
  • value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。
  • focus():将浏览器的焦点设置到此表单字段。
  • blur():移走焦点。仅仅是将焦点从调用这个方法的元素上面移走而已。
  • blur事件:当前字段失去焦点是触发。
  • focus事件:当前字段获得焦点时触发。
  • change事件:对于< input >和< textarea >元素,在他们失去焦点且value值改变时触发;对于< select >元素,其选项发生改变时触发。

文本框脚本

在HTML中,有两种方式来表现文本框:使用< input >元素的单行文本框和使用< textarea >元素的多行文本框。
必须将< input >元素的type属性设置为“text”才表现文本框。size指定文本框中能够显示的字符数。value可以设置文本框的初始值。而maxlength特性则用与指定文本框可以接受的最大字符数。
< textarea >始终为一个多行文本框。要指定大小可以使用rows和cols特性,分别指文本框的字符行数和列数。

选择文本

这两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本。在文本框获得焦点时,选择其所有文本,这是一种常见的做法。

1
2
3
4
5
6
EventUtil.addHandler(textbox,"focus",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);

target.select();
})

通过textbox.value.subString(textbox.selectionStart,textbox.selectionEnd)方法来获得选中的文本。

过滤输入

我们经常要求用户在文本框中输入特定的数据,或者输入特定格式的数据。所以必须使用JavaScript来完成此类过滤输入的操作。
相应向文本框中插入字符操作的是keypress事件,可以检测其对应的字符编码,再决定如何相应。比如:

1
2
3
if(!/\d/.test(String.fromCharCode(charCode))){
//如果不是数值,则……
}

自动切换焦点

在用户填写完当前字段时,自动将焦点切换到下个子弹。通常,在自动切换焦点前,必须知道用户已经输入了既定长度的数据。在keyup事件后,检测当前字符串的长度是否达到了文本框的maxlength,如果达到了,则使用focus()方法,将焦点移到下一个元素。

HTML5约束验证API

为了在将表单提交到服务器之前验证数据,HTML5新增了一些功能。有了这些功能,即便JavaScript被禁用或者由于种种原因未能加载,也可以确保基本的验证。

1
2
3
4
5
6
7
8
9
10
11
<!--required表示必填字段,适用于<input><textarea><select>等-->
<input type="text" name="username" required></input>

<!--email和url是两个得到支持最多的类型-->
<input type="email"></input>

<!--只能输入0到100的值,且必须是5的倍数-->
<input type="number" main="0" max="100" step="5" name="count"/>

<!--pattern属性,一个正则表达式,用于匹配文本框中的值-->
<input type="text" pattern="\d+" name="count" />

使用checkValidity()方法可以检测表单中某个字段是否有效。字段的值是否有效判断的一句是本节前面介绍过的那些约束。

选择框脚本

通过< select >和< option >元素创建。还有以下属性和方法

  • add(newOption,relOption):向空间中插入新的< option >元素,在相关项之前
  • multiple:布尔值,表示是否允许多选;
  • selectedIndex:基于0的选中项的索引,如果没有选中项,值为-1
  • size:选择框中可见的行数;

表单序列化

随着ajax的出现,表单序列化已经成为一种常见需求。在JavaScript中,可以利用表单的type属性,连同name和value属性一起实现对表单的序列化。在表单序列化过程中,一般不包含任何按钮字段,因为结果字符串很可能是通过其他方式提交的。

富文本编辑

富文本编辑,又称WYSIWYG(所见即所得)。可以给iframe指定一个非常简单的HTML页面作为其内容来源。这个页面在iframe中可以向其他页面一样被加载。要它可以编辑,必须要将designMode设置为“on”。另一种编辑富文本内容的方式是使用名为contenteditable的特殊属性,而且这种方法更受欢迎,因为它不需要iframe、空白页和JavaScript,值需要将元素设置为contenteditable属性即可。