JavaScript基础笔记（十）表单脚本

表单脚本

一、表单基础知识

JavaScript中表单对应的是HTMLFormElement类型，该类型继承自HTMLElement类型。

通过document.forms可以获得所有表单元素，通过数值索引和name特性可以获得其中特定的表单。

一）提交表单

单击提交按钮或者图像按钮就可以提交表单。

三种方式：

<!--通用提交按钮-->
<input type='submit' value='submit value'>

<!--自定义提交按钮-->
<button type='submit'>Submit value</button>

<!--图像按钮-->
<input type='image' src='gra.png'>

只要表单中存在上述任何一种按钮，在按钮控件有焦点的情况下，按回车键即可提交表单。

以这种方式提交表单时，浏览器会将请求发送给服务器之前出发submit事件。

在JavaScript中，以编程方式调用submit()方法也可以提交表单。

var form = document.getElementById('myForm');
//提交表单
form.submit();

记住，以submit()方法提交表单不会触发submit事件。

避免重复提交表单方法：

1）第一次提交后禁用表单

2）利用onsubmit事件处理程序取消后续的表单提交操作。

三）重置表单

<!--通用重置按钮-->
<input type='reset' value='reset form'>
<!--自定义重置按钮-->
<button type='reset'>Reset Form</button>

用户单击重置按钮重置表单时会触发reset事件。

也可以通过JavaScript来重置表单：

form.reset();

与调用submit()方法不同，该方法会触发reset事件。

三）表单字段

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

1.共有的表单字段属性

 disabled：布尔值，表示当前字段是否被禁用。
 form：指向当前字段所属表单的指针；只读。
 name：当前字段的名称。
 readOnly：布尔值，表示当前字段是否只读。
 tabIndex：表示当前字段的切换（tab）序号。
 type：当前字段的类型，如"checkbox"、 "radio"，等等。
 value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件
在计算机中的路径。

除了 form 属性之外，可以通过 JavaScript 动态修改其他任何属性 ：

var form = document.getElementById("myForm");
var field = form.elements[0];
//修改 value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";

注意，当在一个type='submit'的按钮上设置click事件处理程序时，我们不能确定click事件和submit事件谁先会被触发。

2.共有的表单字段方法

1）focus()方法：用于将浏览器的焦点设置到表单字段

2）blur()方法，从元素中移走焦点。

3.共有的表单事件

所有表单字段都支持：

1）blur：当表单失去焦点时触发

2）change：对于<input> 和<textarea>元素，当它们失去焦点且value值发生改变时触发，对于<select>元素，在其选项改变时触发。

3）focus：当前字段获得焦点时触发

关于blur和change事件触发的顺序各个浏览器并不相同。

二、文本框脚本

要表现文本框，必须将<input>元素的 type 特性设置为"text"。而通过设置 size 特性，可以指
定文本框中能够显示的字符数。通过 value 特性，可以设置文本框的初始值，而 maxlength 特性则用
于指定文本框可以接受的最大字符数

相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows
和 cols 特性。其中， rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数
（类似于<inpu>元素的 size 特性）。与<input>元素不同， <textarea>的初始值必须要放在
<textarea>和</textarea>之间

另一个与<input>的区别在于，不能在 HTML 中给<textarea>指定最大字符数。

无论这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在 value 属性中。可
以通过这个属性读取和设置文本框的值

我们建议读者像上面这样使用 value 属性读取或设置文本框的值，不建议使用标准的 DOM 方法。

原因很简单：对 value 属性所作的修改，不一定会反映在 DOM 中。因此，在处
理文本框的值时，最好不要使用 DOM 方法。

一）选择文本

1.select()方法：这个方法用于选择文本框中的所有文本。在调用 select()
方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何
时候被调用 。

2.select事件：在选择了文本框中的文本时，就会触发 select
事件。不过，到底什么时候触发 select 事件，还会因浏览器而异 。在调用 select()方法时也
会触发 select 事件

3.获得选择的文本：

虽然通过 select 事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。
HTML5 通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加
两个属性： selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择
文本的范围（即文本选区开头和结尾的偏移量）

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

IE8 及更早的版本中有一个 document.selection 对象，其中保存着用户在整个文档范围内选择
的文本信息；也就是说，无法确定用户选择的是页面中哪个部位的文本。不过，在与 select 事件一起
使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件。要取得选择的文本，首先必
须创建一个范围 ，

4.选择部分文本

HTML5 也 为 选 择 文 本 框 中 的 部 分 文 本 提 供 了 解 决 方 案 ， 即 最 早 由 Firefox 引 入 的
setSelectionRange()方法。现在除select()方法之外，所有文本框都有一个setSelectionRange()
方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引

要看到选择的文本，必须在调用 setSelectionRange()之前或之后立即将焦点设置到文本框。

 

IE选择部分文本：略

三、选择框脚本

选择框是通过<select>和<option>元素创建的。HTMLSelectElement的重要属性和方法：

1）add(new,old):向控件插入新的<option>元素，其位置在old项之前。

2）options:控件中所有<option>的HTMLCollection

3）remove(index)：移除指定位置的<option>

4）selectedIndex：给予0的选中项索引。多选控件只保存第一项。

5）size：选择框可见行数

选择框的 type 属性不是"select-one"，就是"select-multiple"，这取决于 HTML 代码中有
没有 multiple 特性。选择框的 value 属性由当前选中项决定，相应规则如下。
 如果没有选中的项，则选择框的 value 属性保存空字符串。
 如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等
于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
 如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该
项的文本。
 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值

 

在DOM中，每个<option>元素都有一个HTMLOptionElement对象表示。该对象的重要属性：

1）index:当前选项在集合中的索引

2）selected：当前选项是否被选中

3）text：选项的文本

4）value：选项的值

一）选择选项

对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属 性：

var selectedOption = selectbox.options[selectbox.selectedIndex];

对于可以选择多项的选择框， selectedfIndex 属性就好像只允许选择一项一样。设置
selectedIndex 会导致取消以前的所有选项并选择指定的那一项，而读取 selectedIndex 则只会返
回选中项中第一项的索引值 。

另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true。例如，
下面的代码会选中选择框中的第一项：

selectbox.options[0].selected = true;

与 selectedIndex 不同，在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项
的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则
会取消对其他选项的选择。需要注意的是，将 selected 属性设置为 false 对单选选择框没有影响 。

二）添加选项

方式一：

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

方式二：使用option构造函数

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在 IE8 及之前版本中有问题

方式三：使用选择框的add()方法

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案

如果你想将新选项添加到其他位置（不
是最后一个），就应该使用标准的 DOM 技术和 insertBefore()方法。

三）移除选项

方式一：removeChild()方法

方式二：选择框的remove()方法

方式三：将相应的选项设置为0

selectbox.options[0] = null; //移除第一个选项

四）移动和重排选项

活学活用appendChild()和insertBefore()方法

四、表单序列化

略

五、富文本编辑

略