前端开发

表单脚本

表单的基础知识

在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属性即可。