JavaScript笔记：表单脚本

浅浅的花香味﹌ 2022-09-26 03:27 612阅读 0赞

JavaScript最初的应用之一，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。

## 1、表单的基础知识 ##

在javascript中，表单是用HTMLFormElement类型来表示的。HTMLFormElement继承了HTMLElement，因而与其他HTML元素有相同的默认属性，不过HTMLFormElement也有它自己独有的属性和方法：  
acceptCharset：服务器能够处理的字符集  
action：接受请求的URL  
elements：表单中所有控件的集合  
enctype：请求的编码类型  
length：表单中控件的数量  
method：要发送的http请求类型  
name：表单的名称  
reset()：将所有表单域重置为默认值  
submit()：提交表单  
target：用于发送请求和接受相应的窗口名称

获得表单：

// 方法1
    var form = document.getElementById("form1");
    // 方法2
    var firstForm = document.forms[0];
    var myForm = document.forms["form2"];// 获得页面中名字是form2的表单

**提交表单**

<input type="submit" value="Submit Form">
    
    <button type="submit">Submit Form</button>
    
    <input type="image" src="graphic.gif">

只要表单中存在上面任何一个按钮，那么在相应表单获得焦点的前提下，点击回车就可以提交表单。以这种方式提交表单时，浏览器会在请求发送给服务器之前，触发submit事件。这样，我们就有机会验证表单数据，并且决定是否允许表单提交。组织这个事件的默认行为就可以阻止表单的提交：

var form = document.getElementById("myForm");
    EventUtil.addHandler(form, "submit", function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
    });

在javascript中，调用函数submit就可以提交表单，这种方式无需使表单包含提交按钮。

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

注意，在使用submit函数提交表单的时候，不会触发submit事件，因此需要先做验证。

提交表单时可能出现的最大问题,就是重复提交表单。在第一次提交表单后,如果长时间没有反 应,用户可能会变得不耐烦。这时候,他们也许会反复单击提交按钮。结果往往很麻烦(因为服务器要处理重复的请求),或者会造成错误(如果用户是下订单,那么可能会多订好几份)。解决这一问题的办法有两个:在第一次提交表单后就禁用提交按钮,或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

**重置表单**  
在用户单击重置按钮时,表单会被重置。使用 type 特性值为”reset”的input或button都可以创建重置按钮,如下面的例子所示。

<input type="reset" value="Reset Form">
    
    <button type="reset">Reset Form</button>

这两个按钮都可以用来重置表单。在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空,就会恢复为空;而带有默认值的字段,也会恢复为默认值。  
用户单击重置按钮重置表单时,会触发 reset 事件。利用这个机会,我们可以在必要时取消重置操作。例如,下面展示了阻止重置表单的代码。

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

与提交表单一样,也可以通过 JavaScript 来重置表单,如下面的例子所示。

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

与调用 submit()方法不同,调用 reset()方法会像单击重置按钮一样触发 reset 事件。

**表单字段**

可以像访问页面中的其他元素一样,使用原生 DOM 方法访问表单元素。  
此外,每个表单都有elements 属性,该属性是表单中所有表单元素(字段)的集合。这个 elements 集合是一个有序列表, 其中包含着表单中的所有字段,例如input、textarea、button和fieldset。每个表单字段在 elements 集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和 name 特性来访问它们。下面来看一个例子：

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

如果有多个表单控件都在使用一个 name(如单选按钮),那么就会返回以该 name 命名的一个 NodeList。例如,以下面的 HTML 代码片段为例：

<form method="post" id="myForm">
        <ul>
            <li><input type="radio" name="color" value="red">Red</li>
            <li><input type="radio" name="color" value="green">Green</li>
            <li><input type="radio" name="color" value="blue">Blue</li>
        </ul>
    </form>

在这个 HTML 表单中,有 3 个单选按钮,它们的 name 都是”color”,意味着这 3 个字段是一起的。 在访问 elements\[“color”\]时,就会返回一个 NodeList,其中包含这 3 个元素;不过,如果访问 elements\[0\],则只会返回第一个元素。

共有的表单字段属性

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

避免多次提交表单的方法：

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

共有的表单字段方法

每个表单字段都有两个方法:focus()和 blur()。  
其中，focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。例如，接收到焦点的文本框会显示插入符号，随时可以接收输入。使用 focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。为此，可以侦听页面的 load 事件，并在该事件发生时在表单的第一个字段上调用 focus()方法：

EventUtil.addHandler(window, "load", function(event){
        document.forms[0].elements[0].focus();
    });

要注意的是：如果第一个表单字段是一个input元素，且其 type 特性的值为”hidden”，那么，以上代码会导致错误。另外，如果使用 CSS 的 display 和 visibility 属性隐藏了该字段，同样也会导致错误。

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

很棒！

为了保证前面的代码在设置 autofocus 的浏览器中正常运行，必须先检测是否设置了该属性，如果设置了，就不用再调用 focus()了：

EventUtil.addHandler(window, "load", function(event){
        var element = document.forms[0].elements[0];
        if (element.autofocus !== true){
            element.focus(); console.log("JS focus");
        } 
    });

支持 autofocus 属性的浏览器有 Firefox 4+、Safari 5+、Chrome 和 Opera 9.6。

与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点。在调用 blur()方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上面移走而已。在早期 Web 开发中，那时候的表单字段还没有 readonly 特性，因此就可以使用 blur()方法来创建只读字段。 现在，虽然需要使用 blur()的场合不多了，但必要时还可以使用的。

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

共有的表单字段事件

blur：当前字段失去焦点时触发。  
change：对于input和textarea元素,在它们失去焦点且 value 值改变时触发；对于  
select元素,在其选项改变时触发。  
focus：当前字段获得焦点时触发。

通常，可以使用focus和blur事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能(例如，为文本框显示一个下拉选项菜单)。而 change 事件则经常用于验证用户在字段中输入的数据。例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复 文本框的背景颜色，利用 change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实现上述功能的代码：

附上EventUtil部分代码：

## 2、文本框脚本 ##

在 HTML 中,有两种方式来表现文本框：一种是使用input元素的单行文本框，另一种是使用 textarea的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍然存在一些重要的区别。

要表现文本框，必须将input元素的 type 特性设置为”text”。而通过设置 size 特性，可以指定文本框中能够显示的字符数。通过 value 特性，可以设置文本框的初始值，而 maxlength 特性则用于指定文本框可以接受的最大字符数。如果要创建一个文本框，让它能够显示 25 个字符，但输入不能超过 50 个字符,可以使用以下代码：

相对而言，textarea元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows 和 cols 特性。与input元素不同，textarea的初始值必须要放在  
textarea和/textarea之间，如下面的例子所示：

<textarea rows="25" cols="5">initial value</textarea>

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

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

我们建议读者像上面这样使用 value 属性读取或设置文本框的值，不建议使用标准的 DOM 方法。 换句话说，不要使用 setAttribute()设置input元素的 value 特性，也不要去修改textarea元素的第一个子节点。原因很简单:对 value 属性所作的修改，不一定会反映在 DOM 中。**因此，在处理文本框的值时，最好不要使用 DOM 方法**。

**选择文本**

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

var textbox = document.forms[0].elements["textbox1"];
    textbox.select();

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时 候。因为这样做可以让用户不必一个一个地删除文本。  
这种技术能够 较大幅度地提升表单的易用性。

选择select事件

与 select()方法对应的，是一个 select 事件。在选择了文本框中的文本时，就会触发 select 事件。不过，到底什么时候触发 select 事件，还会因浏览器而异。

虽然通过 select 事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。

HTML5 通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加 两个属性:selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择 文本的范围(即文本选区开头和结尾的偏移量)。因此，要取得用户在文本框中选择的文本，可以使用 如下代码：

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

IE9+、Firefox、Safari、Chrome 和 Opera 都支持这两个属性。

选择部分文本

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

textbox.value = "Hello world!" //选择所有文本
    textbox.setSelectionRange(0, textbox.value.length); //"Hello world!" //选择前 3 个字符 
    textbox.setSelectionRange(0, 3); //"Hel" //选择第4到第6个字符 
    textbox.setSelectionRange(4, 7); //"o w"

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

IE8方案：

textbox.value = "Hello world!";
    var range = textbox.createTextRange();
    //选择所有文本
    range.collapse(true);
    range.moveStart("character", 0);
    range.moveEnd("character", textbox.value.length); //"Hello world!" 
    range.select();
    //选择前 3 个字符 
    range.collapse(true); 
    range.moveStart("character", 0); 
    range.moveEnd("character", 3); 
    range.select();//"Hel"
    //选择第4到第6个字符 
    range.collapse(true); 
    range.moveStart("character", 4); 
    range.moveEnd("character", 3); 
    range.select();//"o w"

选择部分文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。

**过滤输入**

我们经常会要求用户在文本框中输入特定的数据，或者输入特定格式的数据。例如，必须包含某些 字符，或者必须匹配某种模式。由于文本框在默认情况下没有提供多少验证数据的手段，因此必须使用 JavaScript 来完成此类过滤输入的操作。而综合运用事件和 DOM 手段，就可以将普通的文本框转换成能够理解用户输入数据的功能型控件。

1、屏蔽字符

有时候，我们需要用户输入的文本中包含或不包含某些字符。例如，电话号码中不能包含非数值字 符。如前所述，响应向文本框中插入字符操作的是 keypress 事件。因此，可以通过阻止这个事件的默 认行为来屏蔽此类字符。在极端的情况下，可以通过下列代码屏蔽所有按键操作：

EventUtil.addHandler(textbox, "keypress", function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
    });

运行以上代码后，由于所有按键操作都将被屏蔽，结果会导致文本框变成只读的。如果只想屏蔽特定的字符，则需要检测 keypress 事件对应的字符编码，然后再决定如何响应。例如，下列代码只允许 用户输入数值：

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)) && charCode > 9){
            EventUtil.preventDefault(event);
        }
    });

获取按键码的方法：

var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==27){ // 按 Esc 
        //要做的事情
    }
    if(e && e.keyCode==113){ // 按 F2 
        //要做的事情
    }            
    if(e && e.keyCode==13){ // enter 键
        //要做的事情
    }

2、操作剪切板

6 个剪贴板事件：  
beforecopy:在发生复制操作前触发。  
copy:在发生复制操作时触发。  
beforecut:在发生剪切操作前触发。  
cut:在发生剪切操作时触发。  
beforepaste:在发生粘贴操作前触发。  
paste:在发生粘贴操作时触发。

在实际的事件发生之前，通过 beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送数据（或者从剪贴板取得数据）之前修改数据。不过，取消这些事件并不会取消对剪贴板的操作——只 有取消 copy、cut 和 paste 事件，才能阻止相应操作发生。

要访问剪贴板中的数据，可以使用 clipboardData 对象：在 IE 中，这个对象是 window 对象的属性；而在 Firefox 4+、Safari 和 Chrome 中，这个对象是相应 event 对象的属性。但是，在 Firefox、Safari 和 Chorme 中，只有在处理剪贴板事件期间 clipboardData 对象才有效，这是为了防止对剪贴板的未授权访问；在 IE 中，则可以随时访问 clipboardData 对象。为了确保跨浏览器兼容性，最好只在发生剪贴板事件期间使用这个对象。

跨浏览器的EventUtil方法：

在需要确保粘贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，能够访问剪贴板是非常有用的。例如，如果一个文本框只接受数值，那么就必须检测粘贴过来的值，以确保有效。在 paste 事件中，可以确定剪贴板中的值是否有效，如果无效，就可以像下面示例中那样，取消默认的行为：

EventUtil.addHandler(textbox, "paste", function(event){
        event = EventUtil.getEvent(event);
        var text = EventUtil.getClipboardText(event);
        if (!/^\d*$/.test(text)){
            EventUtil.preventDefault(event);
        }
    });

**自动切换焦点**

使用 JavaScript 可以从多个方面增强表单字段的易用性。其中，最常见的一种方式就是在用户填写 完当前字段时，自动将焦点切换到下一个字段。通常，在自动切换焦点之前，必须知道用户已经输入了 既定长度的数据(例如电话号码)。例如，美国的电话号码通常会分为三部分:区号、局号和另外 4 位数字。为取得完整的电话号码，很多网页中都会提供下列 3 个文本框：

为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后，自动将焦点切 换到下一个文本框。

**HTML5约束验证API**

为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。有了这些功能，即便 JavaScript 被禁用或者由于种种原因未能加载，也可以确保基本的验证。换句话说，浏览器自己会根据标记中的规则执行验证，然后自己显示适当的错误消息(完全不用 JavaScript 插手)。当然，这个功能只有在支持 HTML5 这部分内容的浏览器中才有效，这些浏览器有 Firefox 4+、Safari 5+、Chrome 和 Opera 10+。

必填字段：

任何标注有 required 的字段，在提交表单时都不能空着。这个属性适用于input、textarea和select字段。在 JavaScript 中，通过对应的 required 属性，可以检查某个表单字段是否为必填字段：

var isUsernameRequired = document.forms[0].elements["username"].required;

另外，使用下面这行代码可以测试浏览器是否支持 required 属性。

var isRequiredSupported = "required" in document.createElement("input");

其他输入类型：

HTML5 为input元素的 type 属性又增加了几个值。这些新的类型不仅能反映数据类型的信息， 而且还能提供一些默认的验证功能。其中，”email”和”url”是两个得到支持最多的类型，各浏览器也都为它们增加了定制的验证机制。例如：

测试浏览器是否支持：

var input = document.createElement("input");
    input.type = "email";
    var isEmailSupported = (input.type == "email");

输入模式：

HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的 值。例如，如果只想允许在文本字段中输入数值，可以像下面的代码一样应用约束：

在 JavaScript 中可以通过 pattern 属性访问模式：

var pattern = document.forms[0].elements["count"].pattern;

使用以下代码可以检测浏览器是否支持 pattern 属性：

var isPatternSupported = "pattern" in document.createElement("input");

检测有效性：

使用 checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回 true，否则返回 false。字段的值是否有效的判断依据是本节前面介绍过的那些约束。换句话说，必填字段中如果没有值就是无效的，而字段中的值与 pattern 属性不匹配也是无效的。例如：

if (document.forms[0].elements[0].checkValidity()){ 
        //字段有效，继续
    } else { 
        //字段无效
    }

要检测整个表单是否有效，可以在表单自身调用 checkValidity()方法。如果所有表单字段都有  
效，这个方法返回 true;即使有一个字段无效，这个方法也会返回 false。

if(document.forms[0].checkValidity()){ 
        //表单有效，继续
    } else { 
        //表单无效
    }

与 checkValidity()方法简单地告诉你字段是否有效相比，validity 属性则会告诉你为什么字段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值。

customError :如果设置了 setCustomValidity()，则为 true，否则返回 false。  
patternMismatch:如果值与指定的 pattern 属性不匹配，返回 true。  
rangeOverflow:如果值比 max 值大，返回 true。  
rangeUnderflow:如果值比 min 值小，返回 true。  
stepMisMatch:如果 min 和 max 之间的步长值不合理，返回 true。  
valid:如果这里的其他属性都是 false，返回 true。checkValidity()也要求相同的值。  
valueMissing:如果标注为 required 的字段中没有值，返回 true。  
……

例如：

if (input.validity && !input.validity.valid){
        if (input.validity.valueMissing){
            alert("Please specify a value.")
        } else if (input.validity.typeMismatch){
            alert("Please enter an email address.");
        } else {
            alert("Value is invalid.");
        }
    }

禁用验证：

通过设置 novalidate 属性，可以告诉表单不进行验证。

在 JavaScript 中使用 noValidate 属性可以取得或设置这个值，如果这个属性存在，值为 true，  
如果不存在，值为 false。

document.forms[0].noValidate = true; //禁用验证

如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上 添加 formnovalidate 属性。

在这个例子中，点击第一个提交按钮会像往常一样验证表单，而点击第二个按钮则会不经过验证而 提交表单。使用 JavaScript 也可以设置这个属性。

//禁用验证 
    document.forms[0].elements["btnNoValidate"].formNoValidate = true;

## 3、选择框脚本 ##

选择框是通过select和option元素创建的。为了方便与这个控件交互，除了所有表单字段共 有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。  
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 属性将依据前两条规则取得第一个选中项的值。

在 DOM 中，每个option元素都有一个 HTMLOptionElement 对象表示。为便于访问数据， HTMLOptionElement 对象添加了下列属性：  
index:当前选项在 options 集合中的索引。  
label:当前选项的标签;等价于 HTML 中的 label 特性。  
selected:布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。  
text:选项的文本。  
value:选项的值(等价于 HTML 中的 value 特性)。

提醒读者注意一点:选择框的 change 事件与其他表单字段的 change 事件触发的 条件不一样。其他表单字段的 change 事件是在值被修改且焦点离开当前字段时触发，而选择框的 change 事件只要选中了选项就会触发。

**选择选项**

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

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

取得选中项之后，可以像下面这样显示该选项的信息：

var selectedIndex = selectbox.selectedIndex;
    var selectedOption = selectbox.options[selectedIndex];
    alert("Selected index: " + selectedIndex + "\nSelected text: " +
    selectedOption.text + "\nSelected value: " + selectedOption.value);

这里，我们通过一个警告框显示了选中项的索引、文本和值。  
对于可以选择多项的选择框，selectedfIndex 属性就好像只允许选择一项一样。设置 selectedIndex 会导致取消以前的所有选项并选择指定的那一项，而读取 selectedIndex 则只会返 回选中项中第一项的索引值。

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

selectbox.options[0].selected = true;

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

实际上，selected 属性的作用主要是确定用户选择了选择框中的哪一项。要取得所有选中的项， 可以循环遍历选项集合，然后测试每个选项的 selected 属性。来看下面的例子：

**添加选项**

可以使用 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); //在 IE8 及之前版本中有问题

第三种添加新选项的方式是使用选择框的 add()方法：  
DOM 规定这个方法接受两个参数：要添加的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项，应该将第二个参数设置为 null。在 IE 对 add()方法的实现中，第二个参数是可选的，而且如果指定，该参数必须是新选项之后选项的索引。兼容 DOM 的浏览器要求必须指定第二个参数，因此要想编写跨浏览器的代码，就不能只传入一个参数。这时候，为第二个参数传入 undefined，就可以在所有浏览器中都将新选项插入到列表最后了。来看一个例子：

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

**移除选项**

与添加选项类似，移除选项的方式也有很多种：

selectbox.removeChild(selectbox.options[0]); //移除第一个选项
    selectbox.remove(0); //移除第一个选项
    selectbox.options[0] = null; //移除第一个选项
    // 移除所有项
    function clearSelectbox(selectbox){ 
        for(var i=0, len=selectbox.options.length; i < len; i++){
            selectbox.remove(i);
        }
    }

## 4、表单序列化 ##

在 JavaScript 中，可以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。  
在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的：  
对表单字段的名称和值进行 URL 编码，使用和号(&)分隔。  
不发送禁用的表单字段。  
只发送勾选的复选框和单选按钮。  
不发送 type 为”reset”和”button”的按钮。  
多选选择框中的每个选中的值单独一个条目。  
select元素的值，就是选中的option元素的 value 特性的值。如果option元素没有  
value 特性，则是option元素的文本值。

## 5、富文本编辑 ##

富文本编辑，又称为 WYSIWYG(What You See Is What You Get，所见即所得)。在网页中编辑富 文本内容，是人们对 Web 应用程序最大的期待之一。  
这一技术 的本质，就是在页面中嵌入一个包含空 HTML 页面的 iframe。通过设置 designMode 属性，这个空白的 HTML 页面可以被编辑，而编辑对象则是该页面body元素的 HTML 代码。designMode 属性有两个可能的值:”off”(默认值)和”on”。在设置为”on”时，整个文档都会变得可以编辑(显示插入符号)，然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等。

可以给 iframe 指定一个非常简单的 HTML 页面作为其内容来源。例如:

<!DOCTYPE html>
    <html>
       <head>
           <title>Blank Page for Rich Text Editing</title>
       </head>
       <body>
       </body>
    </html>

这个页面在 iframe 中可以像其他页面一样被加载。要让它可以编辑，必须要将 designMode 设置 为”on”，但只有在页面完全加载之后才能设置这个属性。因此，在包含页面中，需要使用 onload 事件 处理程序来在恰当的时刻设置 designMode，如下面的例子所示:

等到以上代码执行之后，你就会在页面中看到一个类似文本框的可编辑区字段。这个区字段具有与其他网页相同的默认样式;不过，通过为空白页面应用 CSS 样式，可以修改可编辑区字段的外观。

**使用contenteditable属性**

另一种编辑富文本内容的方式是使用名为 contenteditable 的特殊属性，这个属性也是由 IE 最 早实现的。可以把 contenteditable 属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。 这种方法之所以受到欢迎，是因为它不需要 iframe、空白页和 JavaScript，只要为元素设置 contenteditable 属性即可。

这样，元素中包含的任何文本内容就都可以编辑了，就好像这个元素变成了textarea元素一样。通过在这个元素上设置 contenteditable 属性，也能打开或关闭编辑模式。

var div = document.getElementById("richedit");
    div.contentEditable = "true";

**操作富文本**  
与富文本编辑器交互的主要方式，就是使用 document.execCommand()。这个方法可以对文档执行预定义的命令，而且可以应用大多数格式。可以为 document.execCommand()方法传递 3 个参数: 要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值(如果不需要值，则传递 null)。为了确保跨浏览器的兼容性，第二个参数应该始终设置为 false， 因为 Firefox 会在该参数为 true 时抛出错误。

可以在任何时候使用这些命令来修改富文本区域的外观，如下面的例子所示。

//转换粗体文本
    frames["richedit"].document.execCommand("bold", false, null);
    //转换斜体文本
    frames["richedit"].document.execCommand("italic", false, null);
    //创建指向 www.wrox.com 的链接 
    frames["richedit"].document.execCommand("createlink", false,
     "http://www.wrox.com"); 
    //格式化为一级标题
    frames["richedit"].document.execCommand("formatblock", false, "<h1>");

同样的方法也适用于页面中 contenteditable 属性为”true”的区块，只要把对框架的引用替换 成当前窗口的 document 对象即可。

//转换粗体文本
    document.execCommand("bold", false, null);
    //转换斜体文本
    document.execCommand("italic", false, null);
    //创建指向 www.wrox.com 的链接 
    document.execCommand("createlink", false,"http://www.wrox.com");
    //格式化为 1 级标题
    document.execCommand("formatblock", false, "<h1>");

需要注意的是，虽然所有浏览器都支持这些命令，但这些命令所产生的 HTML 仍然有很大不同。 例如，执行 bold 命令时，IE 和 Opera 会使用strong标签包围文本，Safari 和 Chrome 使用b标签，而 Firefox 则使用span标签。由于各个浏览器实现命令的方式不同，加上它们通过 innerHTML 实现转换的方式也不一样，因此不能指望富文本编辑器会产生一致的 HTML。

除了命令之外，还有一些与命令相关的方法。第一个方法就是 queryCommandEnabled()，可以用它来检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令。这个方法接收一个参数，即要检测的命令。如果当前编辑区域允许执行传入的命令，这个方法返回 true，否则返回 false。

var result = frames["richedit"].document.queryCommandEnabled("bold");

如果能够对当前选择的文本执行”bold”命令，以上代码会返回 true。

另外，queryCommandState()方法用于确定是否已将指定命令应用到了选择的文本。例如，要确定当前选择的文本是否已经转换成了粗体，可以使用如下代码。

var isBold = frames["richedit"].document.queryCommandState("bold");

最后一个方法是 queryCommandValue()，用于取得执行命令时传入的值(即前面例子中传给 document.execCommand()的第三个参数)。例如，在对一段文本应用”fontsize”命令时如果传入了 7，那么下面的代码就会返回”7”:

var fontSize = frames["richedit"].document.queryCommandValue("fontsize");

附上一段自己写简单的的富文本代码：

//html
    <input type="button" class="BGcolor" value="红" data="red" data-type="ForeColor" />
    <div class="edit_wrap" id="richedit" contenteditable="true" style="border:1px blue solid;color:green">sunny day</div>
    
    //js 
    var editWrap = document.querySelector(".edit_wrap"),
    setBGColorBtn = document.querySelector(".BGcolor");
    //editWrap.focus();
    setBGColorBtn.addEventListener("click",setTxtStyle);            
    function setTxtStyle(e){
        var that = e.target,
            type = this.getAttribute("data-type")||"",
            bool = false,
            valueTxt = this.getAttribute("data")||"";
            console.log(type+valueTxt);
        document.execCommand(type,bool,valueTxt);
    };

比较全面的富文本代码链接：  
[http://www.w3cfuns.com/notes/17085/549ac0b64bc19d678f6ca006de7a582a.html][http_www.w3cfuns.com_notes_17085_549ac0b64bc19d678f6ca006de7a582a.html]

**富文本选区**

在富文本编辑器中，使用框架(iframe)的 getSelection()方法，可以确定实际选择的文本。 这个方法是 window 对象和 document 对象的属性，调用它会返回一个表示当前选择文本的 Selection 对象。每个 Selection 对象都有下列属性：  
anchorNode:选区起点所在的节点。  
anchorOffset:在到达选区起点位置之前跳过的 anchorNode 中的字符数量。  
focusNode:选区终点所在的节点。  
focusOffset:focusNode 中包含在选区之内的字符数量。  
isCollapsed:布尔值，表示选区的起点和终点是否重合。  
rangeCount:选区中包含的 DOM 范围的数量。

Selection 对象的这些属性并没有包含多少有用的信息。好在，该对象的下列方法提供了更多信息，并且支持对选区的操作。

addRange(range):将指定的 DOM 范围添加到选区中。  
collapse(node, offset):将选区折叠到指定节点中的相应的文本偏移位置。  
collapseToEnd():将选区折叠到终点位置。  
collapseToStart():将选区折叠到起点位置。  
containsNode(node):确定指定的节点是否包含在选区中。  
deleteFromDocument():从文档中删除选区中的文本，与document.execCommand(“delete”,false, null)命令的结果相同。  
extend(node, offset):通过将 focusNode 和 focusOffset 移动到指定的值来扩展选区。  
getRangeAt(index):返回索引对应的选区中的 DOM 范围。  
removeAllRanges():从选区中移除所有 DOM 范围。实际上，这样会移除选区，因为选区中至少要有一个范围。  
reomveRange(range):从选区中移除指定的 DOM 范围。  
selectAllChildren(node):清除选区并选择指定节点的所有子节点。  
toString():返回选区所包含的文本内容。

Selection 对象的这些方法都极为实用，它们利用了(第 12 章讨论过的)DOM 范围来管理选区。 由于可以直接操作选择文本的 DOM 表现，因此访问 DOM 范围与使用 execCommand()相比，能够对富文本编辑器进行更加细化的控制。看一个例子：

var selection = frames["richedit"].getSelection();
    //取得选择的文本
    var selectedText = selection.toString();
    //取得代表选区的范围
    var range = selection.getRangeAt(0);
    //突出显示选择的文本
    var span = frames["richedit"].document.createElement("span"); span.style.backgroundColor = "yellow"; range.surroundContents(span);

以上代码会为富文本编辑器中被选择的文本添加黄色的背景。这里使用了默认选区中的 DOM 范围， 通过 surroundContents()方法将选区添加到了带有黄色背景的span元素中。

**表单与富文本**

由于富文本编辑是使用 iframe 而非表单控件实现的，因此从技术上说，富文本编辑器并不属于表单。换句话说，富文本编辑器中的 HTML 不会被自动提交给服务器，而需要我们手工来提取并提交 HTML。为此，通常可以添加一个隐藏的表单字段，让它的值等于从 iframe 中提取出的 HTML。具体来说，就是在提交表单之前，从 iframe 中提取出 HTML，并将其插入到隐藏的字段中。下面就是通过表单的 onsubmit 事件处理程序实现上述操作的代码。

EventUtil.addHandler(form,"submit",function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
        //target.elements["comments"].value = document.getElementById("richedit").innerHTML;
    });

[http_www.w3cfuns.com_notes_17085_549ac0b64bc19d678f6ca006de7a582a.html]: http://www.w3cfuns.com/notes/17085/549ac0b64bc19d678f6ca006de7a582a.html