首先推荐以下自己的轻量无依赖富文本编辑器：

觉得不错，给个star支持一下，谢谢

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽管目前的Web和JavaScript已经有了长足的发展，但Web表单的变化并不明显。由于Web表单没有为许多常见任务提供现成的解决手段，很多开发人员不仅会在验证表单时使用JavaScript，而且还增强了一些标准表单控件的默认行为。

表单的基础知识

在HTML中，表单是由<form>元素来表示的，，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。不过，HTMLFormElement也有它自己独有的属性和方法。

• acceptCharset：服务器能够处理的字符集；等价于HTML中的accept-charset特性。
• action：接收请求的URL；等价于HTML中的action特性。
• elements： 表单中所有控件的集合（HTMLCollection）。
• enctype：请求的编码类型；等价于HTML中的enctype特性。
• length：表单中控件的数量
• method：要发送的HTTP请求类型，通常是“get”或“post”；等价于HTML的method特性
• name： 表单的名称
• reset()：将所有表单域重置为默认值
• submit(): 提交表单
• target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。

提交表单

用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为submit即可，而图像按钮则是通过将<input>的type特性值设置为“image”来定义的。

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况，

重置表单

在用户单击重置按钮时，表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。

Reset Form复制代码

这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。

与提交表单一样，也可以通过JavaScript来重置表单。

表单字段

可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。

此外，每个表单都有elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段

共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。表单字段共有的属性和方法如下。

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

可以使用JavaScript动态修改其他任何属性。

// 避免多次提交表单form.addEventListener('submit', function (e) {    var target = e.target;        // 取得提交按钮    var btn = target.elements['submit-btn'];        //禁用它    btn.disabled = true;})复制代码

以上代码为表单的submit事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮并将其disabled属性设置为true。

注意，不能通过onclick事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的submit事件之前触发click事件，有的浏览器则相反。对于先触发click事件的浏览器，意味着会在提交发生之前禁用按钮，结果永远都不会提交表单。因此，最好是通过submit事件来禁用提交按钮。不过，这种方式不适合表单中不包含提交按钮的情况；如前所述，只有在包含提交按钮的情况下，才有可能触发表单的submit事件。

共有的表单字段方法

每个表单字段都有两个方法：focus()和blur()。其中，focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。例如，接收到焦点的文本框会显示插入符号，随时可以接收输入。

默认情况下，只有表单字段可以获得焦点。对于其他元素而言，如果现将其tabIndex属性设置为-1，然后再调用focus()方法，也可以让这些元素获得焦点。

强调： tabindex设置为-1可以让不能被focus的元素变的可以focus。但是设置好后，只能通过js的focus()方法来选中，无法通过键盘的tab选中。

共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件。

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

文本框脚本

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

如果要创建一个文本框，让它能够显示25个字符，但输入不能超过50个字符，可以使用以下代码：

复制代码

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

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

建议通过使用value属性读取或设置文本框的值，不建议使用标准的DOM方法。 原因很简单：对value属性所作的修改，不一定会反映在DOM中。因此，在处理文本框的值时，最好不要使用DOM方法。

选择文本

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

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个一个地删除文本。

选择(select)事件

与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。 另外，在调用select()方法时也会触发select事件。

取得选择的文本

虽然通过select事件我们可以直到用户什么时候选择了文本，但仍然不知道用户选择了什么文本。 HTML5通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。

该规范采取的办法是添加两个属性：selectionStart和selectionEnd。 这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。

选择部分文本

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

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

过滤输入

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

屏蔽字符

响应向文本框中插入字符操作的是keypress事件。因此，可以通过阻止这个事件的默认行为 来屏蔽此类字符。

如果只想屏蔽特定的字符，则需要检测keypress事件对应的字符编码，然后再决定如何响应。

虽然理论上只应该在用户按下只应该在用户按下字符键时才触发keypress事件，但有些浏览器也会其他键触发此事件。

除此之外，还有一个问题需要处理：复制、粘贴及其他操作还要用到Ctrl键。在除IE之外的所有浏览器中，前面的代码也会屏蔽ctrl+C、ctrl+V，以及其他使用Ctrl组合件。因此，最后还要添加一个检测条件，以确保用户没有按下Ctrl键。

操作剪贴板

HTML5后来也把剪贴板事件纳入了规范。下列就是6个剪贴板事件。

• beforecopy： 在发生复制操作前触发。
• copy： 在发生复制时触发
• beforecut
• cut
• beforepaste
• paste

要访问剪贴板中的数据，可以使用clipboardData对象：在IE中，这个对象是window对象的属性； 而在Firefox、Safari和Chrome中，这个对象是相应event对象的属性。

为了确保跨浏览器兼容性，最好只在发生剪贴板事件期间使用这个对象。

这个clipboardData对象有三个方法：getData(format)、setData(format, value)和clearData()。

自动切换焦点

使用JavaScript可以从多个方面增强表单字段的易用性。其中，最常见的一种方式就是在用户填写完当前字段时，自动将焦点切换到下一个字段。通常，在自动切换焦点之前，必须知道用户已经输入了既定长度的数据。

input有一个问题初始值长度超过maxlength不会被截断。

HTML5约束验证API

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

换句话说，浏览器自己会根据标记中的规则执行验证，然后自己显示适当的错误消息（完全不用JavaScript插手）。当然，这个功能只有在支持HTML5这部分内容的浏览器中才有效。

必填字段

第一种情况是在表单字段中指定了required属性：

复制代码

任何标注有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”是两个得到支持最多的类型，各浏览器也都为它们增加了定制的验证机制。

要检测浏览器是否支持这些新类型，可以在JavaScript创建一个<input>元素，然后将type属性设置为“email”和“url”，最后再检测这个属性的值。不支持它们的旧版本浏览器会自动将未知的值设置为“text”，而支持的浏览器则会返回正确的值。

数值范围

除了“email”和“url”，HTML5还定义了另外几个输入元素。这几个元素都要求填写某种基于数字的值：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”还有“time”。

输入模式

HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。

注意，模式的开头和末尾不用加^和$符号（假定已经有了）。这两个符号表示输入的值必须从头到尾都与模式匹配。

与其他输入类型相似，指定pattern也不能阻止用户输入无效的文本。这个模式应用给值，浏览器来判断值是否有效。在JavaScript中可以通过pattern属性访问模式。

var isPatternSupported = 'pattern' in document.createElement('input')复制代码

检测有效性

使用checkValidity()方法。

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

• customError： 如果设置了setCustomValidity()，则为true，否则返回false。
• patternMismatch：如果值与特定的pattern属性不匹配，返回true。
• rangeOverflow: 如果值比max值大，返回true
• rangeUnderflow：如果值比min值小，返回true
• stepMisMatch：如果min和max之间的步长值不合理，返回true
• tooLong：如果值的长度超过了maxlength属性指定的长度，返回true。有的浏览器会自动约束字符数量，因此这个值可能永远都返回false。
• typeMismatch：如果值不是mail或url要求的格式，返回true
• valid：如果这里的其他属性都是false，返回true。checkValidity()也要求相同的值。
• valueMissing： 如果标注为required的字段中没有值，返回true。

禁用验证

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

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

document.forms[0].noValidate = true; //禁用验证复制代码

选择框脚本

选择框是通过<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：选项的值。

其中大部分属性的目的，都是为了方便对选项数据的访问。

var $selectbox = document.forms[0].elements['location'];//不推荐var text = selectbox.options[0].firstChild.nodeValue;var value = selectbox.options[0].getAttribute('value');//推荐var text = selectbox.options[0].text;   //选项的文本var value = selectbox.options[0].value;  //选项的值复制代码

在操作选项时，我们建议最好是使用特定于选项的属性，因为所有浏览器都支持这些属性。在将表单控件作为DOM节点的情况下，实际的交互方式则会因浏览器而异。我们不推荐使用标准DOM技术修改<option>元素的文本或者值。

提醒：选择框的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);复制代码

对于可以多选的选择框，selectedIndex会导致取消以前的所有选项并选择指定的那一项，而读取selectedIndex则只会返回选中项中第一项的索引值。

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

selectbox.options[0].selected = true;复制代码

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

复制代码

添加选项

• 可以使用JavaScript动态创建选项，并将它们添加到选择框中。添加选项的方式有很多。

使用DOM的方法：

var $newOption = document.createElement('option');$newOption.appendChild(document.createTextNode('Option text'));newOption.setAttribute(newOption);复制代码

• 第二种方式是使用Option构造函数来创建选项，这个构造函数是DOM出现之前就有的。

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

移除选项

与添加选项类型，移除选项的方式也有很多种。首先，可以使用DOM的removeChild()方法，为其传入要移除的选项：

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

其次，可以使用选择框的remove()方法。这个方法接受一个参数，即要移除选项的索引。

selectbox.remove(0)复制代码

最后一种方式，就是将相应选项设置为null。这种方式也是DOM出现之前浏览器的遗留机制。

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

移动和重排选项

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

移动选项与移除选项有一个共同之处，即会重置每一个选项的index属性。

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

var $lastOption = $selectDom.options[$selectDom.options.length - 1];$selectDom.insertBefore($lastOption, $selectDom.options[0]);复制代码

表单序列化

随着Ajax的出现，表单序列化已经成为一种常见需求。在JavaScript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。

在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的：

• 对表单字段的名称和值进行URL编码，使用&分割。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选按钮。
• 不发送type为“reset”和“button”的按钮。
• 多选选择框中的每个选中的值单独一个条目。
• 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为“image”的元素。
• 元素的值，就是选中的元素的value特性的值。如果元素没有value特性，则是元素的文本值。 在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其他方式提交的。除此之外的其他上述规则都应该遵循。 function serialize(form) { // 如果form不是object或者form没有elements属性，直接返回 if (typeof form != 'object' || !form.elements) { return; } var parts = []; var item = null; var option = {}; var optValue = ''; for (var i = 0; i < form.elements.length; i++) { item = form.elements[i]; switch (item.type) { case 'select-one': case 'select-multiple': if (item.name.length) { for (var j = 0; j < item.options.length; j++) { option = item.options[j]; optValue = ''; if (option.selected) { optValue = option.hasAttribute('value') ? option.value : option.text; parts.push(encodeURIComponent(item.name) + '=' + encodeURIComponent(optValue)); } } } break; case 'file': case 'submit': case 'reset': case undefined: case 'button': break; case 'radio': case 'checkbox': if (!item.checked) { break; } default: if (item.name.length) { parts.push(encodeURIComponent(item.name) + '=' + encodeURIComponent(item.value)); } break; } } return parts; } 首先定义一个名为parts的数组，用于保存将要创建的字符串的各个部分。 通过for循环迭代每个表单字段，并将其保存在field变量中。 在每一个表单字段里，使用switch语句检测其type属性。 最麻烦的元素，它可能是单选框也可能是多选框。为此，需要遍历控件中的每一个选项，并在相应选项被选中的情况下向数组中添加一个值。
• 对于单选框，只可能有一个选中项，而多选框则可能有零或多个选中项。需要确定使用什么值。如果不存在value特性，或者虽然存在该特性，但值为空字符串，都要使用选项的文本来代替。
• 为检查这个特性，在DOM兼容的浏览器中需要使用hasAttribute()方法。
• 如果表单中包含元素，则该元素会出现在元素集合中，但没有type属性。因此，如果type属性未定义，则不需要对其进行序列化。同样，对于各种按钮以及文件输入字段也是如此。
• 对于单选按钮和复选框，要检查checked属性是否被设置为false，如果是则退出switch语句。如果checked属性为true，则继续执行default语句，即将当前字段的名称和值进行编码，然后添加到parts数组中。
• 函数的最后一步，就是使用join()格式化整个字符串，也就是用和号来分隔每一个表单字段。

富文本编辑

这一技术的本质，就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面<body>元素的HTML代码。designMode属性有两个可能的值：“off”和“on”。在设置为“on”时，整个文档都会变得可以编辑，然后就可以像使用字处理软件一样。

    
        
        
                复制代码

要让iframe内部可以编辑，必须要将designMode设置为“on”，但只有在页面完全加载之后才能设置这个属性。因此，在包含页面中，需要使用onload事件处理程序来在恰当的时刻设置designMode。

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

使用contenteditable属性

另一种编辑富文本内容的方式是使用名为contentieditable的特殊属性，这个属性也是由IE最早实现的。

Tips： difference between and .

contenteditable属性有三个可能的值：“true”表示打开、“false”表示关闭，“inherit”表示从副元素那里继承。

操作富文本

与富文本编辑器交互的主要方式，就是使用document.execCommand()。

富文本选区

在富文本编辑器中，使用框架（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范围。实际上，这样会移除选区，因为选区中至少要有一个范围。
• removeRange(range): 从选区中移除指定的DOM范围。
• selectAllChildren(node): 清除选区并选择指定节点的所有子节点。
• toString(): 返回选区所包含的文本内容。

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

表单与富文本

由于富文本编辑是使用iframe而非表单控件实现的，因此从技术上说，富文本编辑并不属于表单。所以提交编辑器内容的方法是：添加一个隐藏的表单字段，让它的值等于从iframe中提取出的HTML。

小结

虽然HTML和Web应用自诞生以来已经发生了天翻地覆的变化，但Web表单相对却没有什么改变。使用Javascript可以增强已有的表单字段，从而创造新的功能，或者提升表单的易用性。

• 可以使用一些标准或非标准的方法选择文本框中的全部或部分文本
• 大多数浏览器都采用了Firefox操作选择文本的方式，但IE仍然坚持自己的实现
• 在文本框的内容变化时，可以通过侦听键盘事件以及检测插入的字符，来允许或禁止用户输入某些字符
• 在文本框内容必须限制为某些特定字符的情况下，就可以利用剪贴板事件来屏蔽通过粘贴向文本框中插入内容的操作
• 选择框也是经常要通过Javascript来控制的一个表单字段。由于有了DOM，对选择框的操作也比以前方便多了。
• 富文本编辑功能是通过一个包含空HTML文档的iframe元素来实现的。通过将空文档的designMode属性设置为'on'，就可以将该页面转换为可编辑状态。