【有书共读】《JS高级程序设计》读书笔记05

十三章

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

JavaScript 与 HTML 之间的交互是通过事件实现的。可以使用事件处理程序来预定事件，以便事件发生时执行相应的代码。

事件流

事件流描述的是从页面中接收事件的顺序。

事件冒泡

事件捕获

DOM 事件流

事件处理程序

HTML 事件处理程序

通过 HTML 指定事件处理程序。

<input type="button" value="click me" onclick="showMessage()" /> 

这样做有几个缺点：

1. 有时差，用户可能在 HTML 元素一出现在页面上就触发相应事件，但可能事件处理程序还不能执行。
2. 这种事件处理程序的作用域链在不同浏览器中会导致不同结果，不同 JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。
3. HTML 与 JavaScript 代码紧密耦合，一旦改动，起码改动连个地方。不能满足结构、样式、行为分离。

DOM0 级事件处理程序

使用 JavaScript 指定事件处理程序的传统方式，就是将一个函数复制给一个事件处理程序属性。该方法简单，而且可以跨浏览器使用，知道现在依然应用广泛。

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    alert(this.id);
} // 删除事件处理程序 btn.onclick = null;

DOM2 级事件处理程序

“DOM2 级时间”定义了两个方法来添加和删除事件处理程序，IE9+ 支持。

• addEventListener()
• removeEventListener()

它们都接受 3 个参数，要处理的事件类型，作为事件处理程序的函数和一个布尔值，true表示在捕获阶段调用事件处理函数，false表示在冒泡阶段调用。

使用 DOM2 级方法可以添加多个事件处理程序。通过addEventListener()添加的事件监听必须使用removeEventListener()来移除。

事件对象

在触发 DOM 上的某个时间时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

DOM 中的事件对象

无论用什么方法添加事件处理程序，都会传入event对象。event对象包含与创建它的特定事件有关的属性和方法。

在事件处理程序中，对象this始终等于currentTarget，而target只包含事件的实际目标。

只有在事件处理程序执行期间，event对象才存在。一旦时间处理程序执行完毕，event对象将会被立即销毁。

事件类型

UI事件

焦点事件

焦点事件会在页面获得或者失去焦点的时候触发。利用这些事件和document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。

鼠标和滚轮事件

DOM3 中定义了以下 9 个鼠标事件，如下表：

坐标位置

修改键

虽然鼠标事件主要是在鼠标上触发的，但在按下鼠标时键盘上的某些键状态也可以影响到所要采取的操作，修改键如下：

当鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。

相关元素

对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素，mouseout则正好相反。

省略其他代码 }

鼠标按钮

更多事件信息

键盘与文本事件

有三个键盘事件：

• keydown：当用户按下键盘上的任意键时触发，如果按住不放，会重复触发事件。
• keypress：当用户按下键盘上的字符键时触发，如果按住不放，会重复触发事件。
• keyup：当用户释放键盘上的键触发。

键码和字符编码

在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上一个特定的键对应。发生keypress事件时，event对象会包含一个charCode属性，会包含按下键所代表字符的编码。IE8 以下不支持charCode属性，但是会在keyCode中保存字符的 ASCII 编码。

var eventUtil = {
    getCharCode: function(event) { if(typeof event.charCode == 'number') { return event.charCode;
        } else { // IE8及以前，早期opera在keyCode中保存键码 return event.keyCode;
        }
    }
}

DOM3 级变化

DOM3 中不再包含charCode属性，而是包含两个新属性：key和char。key的值是一个字符串，按下某个字符键时，key的值就是相应的文本字符；按下非字符键，key的值是相应的键名（如“Shift”）。而char属性在按下字符键的行为与key相同，在按下非字符键时值为null。

textInput 事件

在 DOM3 级事件中引入，与keypress不同，只有在可编辑区域内输入字符的时候触发。出发该事件时，它的event对象中还包含一个data属性，这是属性就是用户输入的字符。event对象上还有一个属性，叫inputMethod，表示把文本输入到文本框中的方式。

• 0，表示浏览器不确定是怎么输入的
• 1，键盘输入
• 2，粘贴
• 3，拖放
• 4，IME 输入
• 5，在表单中选择某一项输入
• 6，手写输入
• 7，语音输入
• 8，几种方法组合输入
• 9，通过脚本输入

HTML5事件

contextmenu 事件

用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义菜单。

beforeunload 事件

为了让开发人员有可能在页面卸载前阻止这一操作，这个事件会在浏览器卸载页面之前触发。但是不能彻底取消这个事件，因为那就相当于让用户无法离开当前页面。这个事件的意图是将控制权交给用户。为了显示这个弹出对话框，必须将event.returnValue的值设置为要显示给用户的字符串，同时作为函数的值返回。

DOMContentLoaded 事件

window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完整的 DOM 树之后就会触发，不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。

readystatechange 事件

IE 为 DOM 文档中的某些部分提供了readystatechange事件。这个事件的目的是提供与文档或元素的加载状态有关的信息，支持该时间的每个对象都有一个readyState属性，可能包含下列 5 个值中的一个。

• uninitialized（未初始化）：对象存在但尚未初始化。
• loading（正在加载）：对象正在加载数据。
• loaded（加载完毕）：对象加载数据完成。
• interactive（交互）：可以操作对象了，但还没有完全加载。
• complete（完成）：对象已经加载完毕。

hashchange 事件

便于在 URL 的参数列表发生变化时通知开发人员。之所以新增这个事件，是因为在 Ajax 应用中，开发人员经常要利用 URL 参数列表来保存状态或导航信息。

必须要把该事件处理程序添加给window对象，然后 URL 参数列表只要变化就会调用它。此时的event对象应该额外包含两个属性：oldURL和newURL。这两个属性分别保存着参数列表前后的完整 URL。

触摸与手势事件

触摸事件

触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触摸事件：

• touchstart：当手指触摸屏幕时触发，即使有一个手指放在屏幕上也会触发。
• toucehmove：当手指在屏幕上滑动时连续地触发。
• touchend：当手指从屏幕移开时触发。
• touchcancel：当系统停止跟踪触摸时触发。

除了常见的 DOM 属性外，触摸事件还包含下列三个用于跟踪触摸的属性：

• touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
• targetTouches：特定于事件目标的 Touch 对象的数组。
• changeTouches：表示自上次触摸依赖发生了什么改变的 Touch 对象的数组。

每个 Touch 对象包含下列属性：

• clientX：触摸目标在视口中的 x 坐标。
• clientY：触摸目标在视口中的 y 坐标。
• pageX：触摸目标在页面中的 x 坐标。
• pageY：触摸目标在页面中的 y 坐标。
• screenX：触摸目标在屏幕中的 x 坐标。
• screenY：触摸目标在屏幕中的 y 坐标。
• identifier：标识触摸的唯一 ID。
• target：触摸 DOM 节点目标。

这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素时，这些事件发生的顺序如下：

1. touchstart
2. mouseover
3. mousemove
4. mousedown
5. mouseup
6. click
7. touchend

手势事件

两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件：

• gesturestart：当一个手指已经按在屏幕上而另一手指又触摸屏幕时触发。
• gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
• gestureend：当任何一个手指从屏幕上移开时触发。

该事件包含两个额外属性

• rotation：手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转。
• scale：表示两个手指间距离的变化情况；这个值从 1 开始，并随距离拉大而增长，随距离缩短而减小。

内存和性能

事件委托

只需在 DOM 树中尽量最高的层次上添加一个事件处理程序：

<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li> <li id="sayHi">Say hi</li> </ul> 

var list = document.getElementById('myLinks');
EventUtil.addHandler(list, 'click', function(event) { var target = EventUtil.getTarget(event);
    target.style.backgroundColor = 'red';
});

十四章

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

除了通过getElementById()获取表单元素，也可以使用document.forms取得页面中所有表单。

提交表单

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

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

也可以使用编程方式调用submit()方法也可以提交表单。不过用该方法提交表单时不会触发submit事件，因此在调用该事件之前需要先验证表单数据。

重置表单

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

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

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

用户单击重置按钮重置表单时，会触发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;

共有的表单字段属性

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

共有的表单字段方法

• focus()：用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以相应键盘事件。
• blur()：从元素中移走焦点。一般用于设置readyOnly字段（现在已经不需要了）。

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

共有的表单字段事件

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

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

文本框脚本

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

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

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

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

选择文本

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

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

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

选择（select）事件

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

取得选择的文本

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

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

过滤输入

我们经常会要求用户在文本框中输入特定的数据，或者输入特定格式的数据。由于文本框在默认情况下没有提供多少验证数据的手段，因此必须使用JavaScript 来完成此类过滤输入的操作。

屏蔽字符

上述代码中，由于 Firefox 和 Safari 会对向上键、向下键、退格键和删除键触发keypress事件；Firefox 中所有非字符键触发的keypress事件的字符编码是 0，Safari 3 以前版本中，对应的字符编码均为 8。除此之外还有一个问题需要考虑到买就是 Ctrl + C、Ctrl + V 以及其他 Ctrl 组合键。

操作剪贴板

要访问剪贴版中的数据，可以使用 clipboardData 对象：IE 中这个对象是window对象的属性，其他浏览器中，是相应event对象的属性。最好只在发生剪贴板事件期间使用这个对象。

clipboardData 对象有三个方法：

• getData()：接受一个参数，要取得的数据的格式。IE 中，有两种数据格式："text"和"URL"。其他浏览器中，参数是一种 MIME 类型，不过，可以用"text"代表"text/plain"。
• setData()：第一个参数是数据类型，第二个参数是要放在剪贴板中的文本。
• clearData()：清除数据

var EventUtil = { // 省略的代码 getClipboardText: function(event) { var clipboardData = event.clipboardData || window.clipboardData; return clipboardData.getData("text");
    },
    setClipboardText: function(event) { if (event.clipboardData) { return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData) { return window.clipboardData.setData("text", value);
        }
    }, // 省略的代码 }

自动切换焦点

使用 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"> 

为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后，自动将焦点切换到下一个文本框。换句话说，用户在第一个文本框中输入了 3 个数字之后，焦点就会切换到第二个文本框，再输入 3 个数字，焦点又会切换到第三个文本框。

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

必填字段

<input type="text" name="username" required>

其他输入类型

HTML5 为<input>元素添加了几个新的值，比较实用的就是email和url。

数值范围

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

对所有这些数值类型的输入元素，可以指定min属性，max属性和step属性：

<input type="number" min="0" max="100" step="5" name="count"> 

以上属性在 JavaScript 中都能通过对应的元素访问（或修改），还有两个方法：

• stepUp()：在当前值基础上加上数值。

• stepDown()：在当前值基础上减去数值。

输入模式

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

检测有效性

使用checkValidity()方法可以检测表单的某个字段是否有效，validaity属性则会告诉你为什么字段有效或者无效。这个对象包含一系列属性，每个属性会返回一个布尔值。

• customError：如果设置了setCustomValidity()，则为true，否则返回false。
• patternMismatch：如果值与指定的pattern属性不匹配，返回true。
• rangeOverflow：如果值比max大，返回true。
• rangeUnderflow：如果值比min小，返回true。
• stepMisMatch：如果min和max之间的步长值不合理，返回true。
• tooLong：如果值的长度超过了maxLength属性指定的长度，返回true。
• typeMismatch：如果值不是"mail"或"url"要求的格式，返回true。
• valid：如果这里的其他属性都是false，返回true。
• validMissing：如果标注为required的字段中没有值，返回true。

禁用验证

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

选择框脚本

选择框是通过<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特性）

选择选项

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

对于多选项，可以通过selected属性获取被选中的项。

function getSelectedOptions(selectbox) { var result = new Array(); var option = null; for (var i = 0, len = selectbox.options.length; i < len; i++) {
        option = selectbox.options[i]; if (option.selected) {
            result.push(option);
        }
    } return result;
}

添加选项

DOM 方法：

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

用 Option 构造函数创建新选项：

var newOption = new Option("Option Text", "Option value");
selectbox.appendChild(newOption);

用add()方法：

var newOption = new Option("Option Text", "Option value");
selectbox.add(newOption, undefined);

移除选项

可以使用removeChild()，也可以使用remove()方法，接受一个参数，要删除选项的索引。

移动和重排选项

使用appendChild()和insertBefore()。

表单序列化

由于 Ajax 的出现，表单序列化已经成为常见需求，在序列化表单之前，必须了解在表单提交期间，浏览器是怎样将数据发送给服务器的。

• 对表单字段的名称和值进行 URL 编码，使用和 & 分隔。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选框按钮。
• 不发送type为"reset"和"button"的按钮。
• 多选选择框中的每个选中的值单独一个条目。
• 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括 type 为"image"的<input>元素。
• <select>元素的值，就是选中的<option>元素的value特性值。如果<option>元素没有value特性，则是<option>元素的文本值。

function serialize(form) { var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue; for (i = 0, len = form.elements.length; i < len; i++) {
        field = form.elements[i]; switch (field.type) { case "select-one": case "select-multiple": if (field.name.length) { for (j = 0, optLen = field.options.length; j < optLen; j++) {
                        option = field.options[j]; if (option.selected) {
                            optValue = ""; if (option.hasAttribute) {
                                optValue = (option.hasAttribute("value") ? option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                } break; case undefined: //fieldset case "file": //file input case "submit": //submit button case "reset": //reset button case "button": //custom button break; case "radio": //radio button case "checkbox": //checkbox if (!field.checked) { break;
                } /* falls through */ default: //don't include form fields without names if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    } return parts.join("&");
}

富文本编辑

富文本编辑，又称为 WYSIWYG（What You See Is What You Get，所见即所得）。虽然也没有规范，但在 IE 最早引入的这一功能基础上，已经出现了事实标准。各大浏览器都已经支持这一功能。这一技术的本质，就是在页面中嵌入一个包含空 HTML 页面的<iframe>。通过设置designMode属性，这个空白的 HTML 页面可以被编辑，而编辑对象则是该页面body元素的 HTML 代码。designMode属性有两个可能的值：off（默认值）和on。可以给 iframe 指定一个非常简单的 HTML 页面作为其内容来源。例如：

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

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

<iframe name="richedit" style="height:100px;width:100px;" src="blank.htm"></iframe> <script type="text/javascript"> EventUtil.addHandler(window, "load", function(){
        frames["richedit"].document.designMode = "on";
    }); </script> 

使用 contenteditable 属性

<div class="editable contenteditable"></div> 

var div = document.getElementById("richeidt");
div.contentEditable = "true"; //有三个可能值"true","fasle"和"inherit" 

操作富文本

富文本选区

表单与富文本

通过innerHTML取得富文本编辑器中的值，然后放入一个隐藏的<input>中。