JavaScript表单处理全解析：从基础属性到富文本编辑

表单基础与HTMLFormElement对象

表单是Web应用中用于收集用户输入的关键组件。

一个完整的表单包含三个核心部分：首先是表单标签，它定义了处理表单数据的CGI程序URL以及数据提交至服务器的HTTP方法；其次是表单域，涵盖了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉列表及文件上传控件等交互元素；最后是表单按钮，包括提交、复位及普通按钮，用于触发数据传送至服务器CGI脚本、取消输入或控制其他预设的处理逻辑。

JavaScript与表单紧密相连，其最初的应用场景便是分担服务器处理表单数据的责任，从而减少对服务器的依赖。尽管Web技术和JavaScript本身已大幅演进，但Web表单在应对许多常见任务时仍缺乏现成的解决方案。因此，开发人员不仅利用JavaScript进行表单验证，还常通过它来增强标准表单控件的默认行为，提升用户体验。

一、表单基础知识

在HTML中，表单由<form>标签定义，而在JavaScript中，表单对应HTMLFormElement类型。该类型继承自HTMLElement，因此拥有与所有Element元素相同的默认属性，同时也具备其特有的属性和方法。

acceptCharset：表示服务器能够处理的字符集，等价于HTML中的accept-charset特性。

action：指定接受请求的URL，等价于HTML中的action特性。

elements：包含表单中所有控件的集合，类型为HTMLCollection。

enctype：定义请求的编码类型，等价于HTML中的enctype特性。

length：表示表单中控件的数量。

method：指定要发送的HTTP请求类型，通常为"get"或"post"，等价于HTML的method特性。

name：表单的名称，等价于HTML的name特性。

reset()：将所有表单域重置为默认值。

submit()：提交表单。

target：用于发送请求和接收响应的窗口名称，等价于HTML的target特性。

获取form表单元素的方法包括：通过ID获取，例如 var form=document.getElementById('form1');。

通过document.forms集合获取，例如 var firstForm=document.forms[0];，利用索引值'0'可取得页面中的第一个表单元素。

通过document.forms集合按名称获取，例如 var form2=document.forms['form2'];，利用name值可取得特定的表单元素。

提交表单：

　<!-- 通用提交按钮 -->
　<input type="submit" value="Submit Form">
　<!-- 自定义提交按钮 -->
　<button type="submit">Submit Form</button>
　<!-- 图像按钮 -->
　<input type="image" src="graphic.gif">

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这使得我们有机会验证表单数据，并据此决定是否允许提交。通过阻止该事件的默认行为，即可取消表单提交。

在JavaScript中，同样可以以编程方式调用submit()方法来提交表单：

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

阻止表单提交（阻止默认事件）：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});

当表单数据无效且不能发送给服务器时，可以使用这一技术来阻止提交。

重置表单：

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

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。

使用JavaScript方法重置表单：

var form = document.getElementById("myForm");
//重置表单
form.reset();

阻止重置表单的默认操作：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});

表单字段属性、方法及焦点控制

表单字段：

每个表单都拥有elements属性，该属性是表单中所有表单元素（字段）的集合。这个集合是一个有序列表，每个表单字段在elements集合中出现的顺序与在标记中出现的先后顺序相同，可以通过位置和name值来访问它们。常见的表单字段包括input、select、fieldset，要取得表单中的表单字段：

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

共有的表单字段属性：

disabled：布尔值，表示当前字段是否被禁用。

form：指向当前字段所属表单的指针，只读。

name：当前字段的名称。

readOnly：布尔值，表示当前字段是否只读。

tabIndex：表示当前字段的切换（tab）序号。

type：当前字段的类型，如"checkbox"、"radio"等。

value：当前字段将被提交给服务器的值。对于文件字段，该属性只读，包含文件在计算机中的路径。

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

能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。

用户可能会重复单击表单的提交按钮。在涉及信用卡消费等场景时，这会导致费用翻番，成为一个严重问题。

为此，最常见的解决方案是在第一次单击后就禁用提交按钮。只需监听submit事件，并在该事件发生时禁用提交按钮即可：

//避免多次提交表单
　EventUtil.addHandler(form, "submit", function(event){
　event = EventUtil.getEvent(event);
　var target = EventUtil.getTarget(event);
//取得提交按钮
　var btn = target.elements["submit-btn"];
//禁用它
　btn.disabled = true;
　});

除了<fieldset>之外，所有表单字段都有type属性。对于<input>元素，该值等于HTML特性type的值。对于其他元素，这个type属性的值如下表所列。

共有的表单字段方法：

每个表单字段都有两个方法：focus()和blur()。使用focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。

EventUtil.addHandler(window, "load", function(event){ /*给window绑定一个监听事件，放页面加载完成，光标自动对准在指定的表单字段*/
document.forms[0].elements[0].focus();
});

HTML5为表单字段新增了一个autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段。

例如：

<input type="text" autofocus>

与focus()方法相对的是blur()方法，它的作用是从元素中移走焦点：

document.forms[0].elements[0].blur();

change事件：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于

<select>元素，在其选项改变时触发。

文本框脚本与HTML5约束验证

二、文本框脚本

在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。

选择文本：

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，实现代码如下：

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

取得选择的文本：

虽然通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。HTML5通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性：selectionStart和selectionEnd。

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

IE9+、Firefox、Safari、Chrome和Opera都支持这两个属性。IE8及之前版本不支持这两个属性，而是提供了另一种方案。IE8及更早的版本中有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息

function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}

过滤输入：

我们经常会要求用户在文本框中输入特定的数据，或者输入特定格式的数据。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);//取得输入键的字符编码
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){ //将字符编码转换到字符，并用正则表达式检测是否符合匹配

EventUtil.preventDefault(event);

}
});

以上代码实现对表单字段中输入的数据的控制，只允许输入数字

有时我们想要屏蔽哪些非数字的键，而不像屏蔽哪些基本键和按下ctrl键的操作。

自动切换焦点：

使用JavaScript可以从多个方面增强表单字段的易用性。其中，最常见的一种方式就是在用户填写完当前字段时，自动将焦点切换到下一个字段。为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后，自动将焦点切换到下一个文本框。

比如对于下面的表单字段而言：

<input type="text" name="tel1" id="txtTel1" maxlength="3">

<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

想要达到自动切换焦点的效果，可以这样做：

(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //取得事件源
if (target.value.length == target.maxLength){ //检测输入的字符是否达到最大的字符要求
　var form = target.form;//取得该字段所在的表单
for (var i=0, len=form.elements.length; i < len; i++) { //遍历表单的字段
if (form.elements[i] == target) {//当遍历到当前所在的目标字段时，将焦点对准下一个表单字段
if (form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1"); //取得目标
var textbox2 = document.getElementById("txtTel2");　
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);　//绑定事件
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

HTML5约束验证API

为了在将表单提交到服务器之前验证数据，HTML5新增了一些功能。

必填字段：required，例子比如：<input type="text" name="username" required>

type属性："email"类型要求输入的文本必须符合电子邮件地址的模式，而"url"类型要求输入的文本必须符合URL的模式。

pattern属性：这个属性的值是一个正则表达式，用于匹配文本框中的值。例子如：<input type="text" pattern="\d+" name="count">

禁用验证：通过设置novalidate属性，可以告诉表单不进行验证。例子如：

<form method="post" action="signup.php" novalidate>
<!--这里插入表单元素-->
</form>

选择框脚本与动态操作

三、选择框脚本

选择框是通过<select>和<option>元素创建的。该类型还提供下列属性和方法：

add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）之前。

multiple：布尔值，表示是否允许多项选择；等价于HTML中的multiple特性。

options：控件中所有<option>元素的HTMLCollection。

remove(index)：移除给定位置的选项。

selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。

size：选择框中可见的行数；等价于HTML中的size特性。

选择框的type属性不是"select-one"，就是"select-multiple"，这取决于HTML代码中有没有multiple特性。选择框的value属性由当前选中项决定，相应规则如下。

如果没有选中的项，则选择框的value属性保存空字符串。

如果有一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也同样遵循此条规则。

如果有一个选中项，但该项的value特性在HTML中未指定，则选择框的value属性等于该项的文本。

如果有多个选中项，则选择框的value属性将依据前两条规则取得第一个选中项的值。

选择选项：

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

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

添加选项：

可以使用JavaScript动态创建选项，并将它们添加到选择框中。

第一种方式就是使用如下所示的DOM方法：

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);

第三种添加新选项的方式是使用选择框的add()方法，DOM规定这个方法接受两个参数，要添加的新选项和将位于新选项之后的选项：

var newOption = new Option("Option text", "Option value"); //
selectbox.add(newOption, undefined); //最佳方案 ，将新选项添加到列表最后

移除选项：

DOM的removeChild()方法，为其传入要移除的选项，如下面的例子所示：

selectbox.removeChild(selectbox.options[0]); //移除第一个选项

其次，可以使用选择框的remove()方法：

selectbox.remove(0); //移除第一个选项

最后一种方式，就是将相应选项设置为null：

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

要清除选择框中所有的项，需要迭代所有选项并逐个移除它们：

function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){
selectbox.remove(0);
　}
}

这个函数每次只移除选择框中的第一个选项。由于移除第一个选项后，所有后续选项都会自动向上移动一个位置，因此重复移除第一个选项就可以移除所有选项了。

移动和重排选项：

如果为appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置：

var selectbox1 = document.getElementById("selLocations1"); //每个子节点只有一个父节点，所以会先删除以前位置的节点
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

重排选项次序的过程也十分类似，最好的方式仍然是使用DOM方法。要将选择框中的某一项移动到特定位置，最合适的DOM方法就是insertBefore()；

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); //要在选择框中向前移动一个选项的位置

表单序列化规则

表单序列化：

表单序列化简单说就是将，各表单字段按名值对的形式进行url编码。

表单序列化有以下规则：

对表单字段的名称和值进行URL编码，使用和号（&）分隔。

不发送禁用的表单字段。

只发送勾选的复选框和单选按钮。

不发送type为"reset"和"button"的按钮。

多选选择框中的每个选中的值单独一个条目。

在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为"image"的<input>元素。

<select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。

富文本编辑实现方案

四、富文本编辑

这一技术的本质，就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页可以被编辑，而编辑对象则是该页面<body>元素的HTML代码。designMode属性有两个可能的值："off"（默认值）和"on"。在设置为"on"时，整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等。另一种编辑富文本内容的方式是使用名为contenteditable的特殊属性，这个属性也是由IE最早实现的。可以把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。

以上这篇基于JavaScript表单脚本(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。