首页 > 代码库 > 第14章表单脚本
第14章表单脚本
一、表单基础知识
在HTML 中，表单是由<form>元素来表示的，而在JavaScript 中，表单对应的则是HTMLFormElement 类型HTMLFormElement 属性和方法如下：
acceptCharset 服务器能够处理的字符集
action 接受请求的URL
elements 表单中所有控件的集合
enctype 请求的编码类型
length 表单中控件的数量
name 表单的名称
target 用于发送请求和接受响应的窗口名称
reset() 将所有表单重置
submit() 提交表单
获取表单<form>对象的方法有很多种，如下：
document.getElementById(‘myForm‘); //使用ID 获取<form>元素
document.getElementsByTagName(‘form‘)[0]; //使用获取第一个元素方式获取
document.forms[0]; //使用forms 的数字下标获取元素
document.forms[‘yourForm‘]; //使用forms 的名称下标获取元素
document.yourForm; //使用name 名称直接获取元素（不建议使用）
(1)提交表单
submit 事件的默认行为就是携带数据跳转到指定页面（可以通过阻止默认事件阻止它）
提交数据最大的问题就是重复提交表单，有两种方法可以解决这种问题：第一种就是提交之后，立刻禁用点击按钮；
第二种就是提交之后取消后续的表单提交操作。
1.document.getElementById(‘sub‘).disabled = true; //将按钮禁用
2.var flag = false //设置一个监听变量
if (flag == true) return //如果存在返回退出事件
flag = true; //否则确定是第一次，设置为true
(2)重置表单
点击重置按钮时，表单会被初始化.
有两种方法调用reset 事件:
1.直接type="reset"；
<input type="reset" value="http://www.mamicode.com/重置" /> //不需要JS 代码即可实现
2.fm.reset()方法调
(3)表单字段
form的elements 属性，该属性是表单中所有元素的集合，可以用fm.elements[数字下标/name]获取某个元素;
若多个表单字段都使用同一个name，那么就会返回该name 的NodeList 表单列表
1.共有的表单字段属性
disabled 布尔值，表示当前字段是否被禁用
form 指向当前字段所属表单的指针，只读
name 当前字段的名称
readOnly 布尔值，表示当前字段是否只读
tabIndex 表示当前字段的切换
type 当前字段的类型
value 当前字段的值
2.共有的表单字段方法
focus() 将焦点定位到表单字段里
blur() 从元素中将焦点移走
3.共有的表单字段事件
blur 当字段失去焦点时触发
change 对于<input>和<textarea>元素，在改变value 并失去焦点时
触发；对于<select>元素，在改变选项时触发
focus 当前字段获取焦点时触发
二.文本框脚本
单行文本框<input type="text">，多行文本框<textarea>，通过value 获取他们的值
1.选择文本
select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中
2.选择部分文本
非IE或IE9+:setSelectionRange(索引,长度)
eg.
textField.setSelectionRange(0, textField.value.length); //选择全部
textField.focus();
IE：使用IE 的范围操作
eg.
var range = textField.createTextRange(); //创建一个文本范围对象
range.collapse(true); //将指针移到起点
range.moveStart(‘character‘, 0); //移动起点，character 表示逐字移动
range.moveEnd(‘character‘, 1); //移动终点，同上
range.select(); //焦点选定
说明:
[backcolor=rgb(243, 248, 255)]moveStart 更改范围的开始位置[backcolor=rgb(243, 248, 255)]
[backcolor=rgb(243, 248, 255)] moveEnd 更改范围的结束位置
[backcolor=rgb(243, 248, 255)] collapse 将插入点移动到当前范围的开始或结尾
[backcolor=rgb(243, 248, 255)] move 折叠给定文本范围并将空范围移动给定单元数
[backcolor=rgb(243, 248, 255)] execCommand 在当前文档、当前选中区或给定范围上执行命令
[backcolor=rgb(243, 248, 255)] select 将当前选择区置为当前对象
[backcolor=rgb(243, 248, 255)] findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。
3.取得选择的文本
非IE或IE9+[color=rgb(51, 51, 51)]：为文本框提供了两个属性：selectionStart 和selectionEnd
eg.
textArea.value.substring(this.selectionStart, this.selectionEnd));
IE:提供了一个属于属于document的selection 对象
eg.
document.selection.createRange().text
注:有一个最大的问题，就是IE 在触发select 事件的时候，在选择一个字符后立即触[color=rgb(51, 51, 51)]发，
[color=rgb(51, 51, 51)] 而其他浏览器是选择想要的字符释放鼠标键后才触发。所以，如果使用alert()的话，导 致跨浏览器的不兼容,这个暂无方法解决，所以不要用alert
4.过滤输入
1) 屏蔽字符
即在提交前限制某些字符输入，通过监听keypress,正则表达式判断符合条件则阻止默认事件
注:前半段条件判断只有数字才可以输入，导致常规按键，比如光标键、退格键、删除键等无法使用,
解放这些键,所以加上charCode > 8
2) 操作剪贴板
阻止复制、粘贴、裁剪可以通过阻止以下事件的默认事件:
copy 在发生复制操作时触发
cut 在发生裁剪操作时触发
paste 在发生粘贴操作时触发
beforecopy 在发生复制操作前触发
beforecut 在发生裁剪操作前触发
eforepaste 在发生粘贴操作前触发
另一个 可能会影响输入的因素就是：输入法，中文输入法，它的原理是在输入法面板上先存储文本，
按下回车就写入英文文本，按下空格就写入中文文本，我们可以通过CSS 来禁止调出输入法
eg.
style="ime-mode:disabled" //CSS 直接编写
areaField.style.imeMode = ‘disabled‘; //或在JS 里设置也可以
注:Chrome 浏览器却无法禁止输入法调出,只好用正则验证已输入文本
eg.
addEvent(areaField, ‘keyup‘, function (evt) { //keyup 弹起的时候
this.value = http://www.mamicode.com/this.value.replace(/[^/d]/g, ‘‘); //把非数字都替换成空
});
3) 自动切换焦点
在满足一定条件时(比如长度)，自动切换到下一个字段上继续填写
四、HTML5对表单的约束验证
1.必填字段 在表单中指定required字段，凡是标注有required的字段在提交表单时值都不能为空。这个属性适用于<input>、<textarea>和<select>字段。（opera11及之前的版本还不支持<select>的required属性）。
<form action="post">
<label for="ele1">约束必填字段：</label><input id="eleOne" type="text" name="username" required>
<button type="submit">submit</button>
</form>
可以使用如下代码检测浏览器的支持性
var isRequiredSuppored = "required" in document.createElement("input");
2.其他输入类型
HTML5为input元素的type属性又增加了几个值。这些新类型不仅能反映数据类型的信息，而且还能提供一些默认的验证功能，其中“email”和“url”是两个得到支持最多的类型，浏览器为他们提供了验证机制。
<form action="post">
<label for="ele2">其他输入类型：</label><br>
<input type="email" name="email"><br>
<input type="url" name="url"><br>
<button type="submit">submit</button>
</form>
浏览器只能简单验证其输入的格式并不能验证它的有效性。
可以用以下方式来检测浏览器是否支持
var input = document.createElement("input");
input.type="email";
var isEmailedSuppored = (input.type = "email");
3.数值范围
HTML5还给type定义了其他属性“number”、“range”、“datatime”、“datatime-local”、“data”、“month”、“week”、“time”。对于这些数值类型的输入元素，可以指定min属性（最小的可能值）、max属性（最大的可能值）和step属性（从min到max的两个刻度间的差值）
<form action="post">
<label for="ele3">数值范围：</label><input type="number" min="0" max="10" step="2"><br>
<button type="submit">submit</button>
</form>
在不同的浏览器中可能会看到能够自动递增递减的按钮（如图），因浏览器而异。
4.输入模式
HTML5为文本新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值
<form action="post">
<label for="ele4">输入模式：</label><input type="text" pattern="\d+" name="count"><br>
<button type="submit">submit</button>
</form>
注意：模式的开头和末尾不用加^和$符号（假定已经有了）。这两个符号表示输入的值必须从头到尾都与模式匹配。
5.使用以下代码可以检测浏览器是否支持pattern属性。
var isPatternSuppored = "pattern" in document.createElement("input");
6.禁用验证
通过设置novalidate属性，可以告诉我们表单不进行验证。
<form method="post" action="XXX.php" novalidate>
<!--这里插入表单元素->
</form>
如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在响应的按钮上添加formnovalidate属性。
<form method="post" action="XXX.php" novalidate>
<!--这里插入表单元素->
<input type="submit" value="http://www.mamicode.com/submit">
<input type="submit" value="http://www.mamicode.com/NOsubmit" formvalidate>
</form>
五、选择框脚本
选择框通过select和option元素创建的。除了共有的属性和方法外，下面的是特有的属性和方法：
add(newOption,relativeOption): 向控件中插入新<option>元素，其位置相关项relativeOption之前
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特性在HTML中未指定：value为该选项的文本；
选择多个，依据前两条规则取得第一个选中项的值；
在DOM中，每个<option>元素都有一个HTMLOptionElement对象表示。为了便于访问，HTMLOptionElement对象添加了下列属性：
index：当前项在option集合中的索引
label：当前选项的标签，等价于HTML中的label标签
selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项
text：选项的文本
value：选项的值，等价于HTML的value特性。
如：
var text = selection.options[0].text; //获取选项的文本
var text = selection.options[0].value; //获取选项的值
- 选择选项
selectedIndex属性
对于只能选择一项的选项，访问选中项的方式是使用选择框的selectedIndex属性。对于多选项，selectedIndex只返回第一项的索引值。
var selectedOption = selection.options[selection.selectedIndex]
selected属性
多选的情况下可以设置多个选项的selected属性为true：
selection.multiple = true;
selection.options[0].selected = true;
selection.options[2].selected = true;
可以遍历所有的选中项：
function getSelectedOptions(selectbox) {
var result = [];
var option = null;
for (var i = 0; i < selectbox.options.length; i++) {
if (selectbox.options[i].selected) {
result.push(selectbox.options[i]);
}
}
return result;
}
var list = getSelectedOptions(selection);
list.forEach( function(element, index) {
console.log(element.value); //log所有被选中的选项
});
2. 添加选项
DOM方法
第一种方法DOM方法：
var selection = document.getElementById("cars");
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.value = "http://www.mamicode.com/Option value";
selection.appendChild(newOption);
Option构造函数方法(IE中有bug)
第二种方法Option构造函数（接收两个参数:text,value）：
var selection = document.getElementById("cars");
var newOption = new Option("Option text","Option value");
selection.appendChild(newOption); //这里可以用appendChild来添加，但在IE8及以前会出现问题
add()方法（推荐!）
第三种方法使用add函数（接收两个参数：新选项，位于新选项最后的选项；如果要插入成为最后的选项，第二个参数应该设置为undefined）：
var selection = document.getElementById("cars");
var newOption = new Option("Option text","Option value");
selection.add(newOption,undefined); //第二个参数说明最新的option放在最后
如果要添加到别处，应当使用DOM方法和insertBefore()；
3. 移除选项
第一种方法DOM方法（利用removeChild方法）：
selection.removeChild(selection.options[0]);
第二种方法用选择框的remove方法：
selection.remove(0); //移除第一个
第三种为设置null：
selection.options[0] = null;
或者删除所有的选项（要注意：由于移除第一个选项后，所有后续选项都会自动向上移动一个位置，所以重复删除第一个选项就可以删除所有选项了。for循环内部需要把i替换成0）：var selection = document.getElementById("cars");
for (var i = 0, len = selection.options.length; i < len; i++) {
selection.removeChild(selection.options[0]);
// selection.remove(0);
// selection.options[0] = null;
};
4. 移动和重排选项
移动选项用appendChild()方法：
var selection = document.getElementById("cars");
var selection2 = document.getElementById("cars2");
selection2.appendChild(selection.options[0]);
比如说让某个选项从一个选择框中移动到另一个选择框中：
var selection = document.getElementById("cars");
var selection2 = document.getElementById("cars2");
var transfer = document.getElementById("transfer");
transfer.addEventListener("click", function() {
var selectedOptions = [];
for (var i = 0, len = selection.options.length; i < len; i++) {
if (selection.options[i].selected) {
selectedOptions.push(selection.options[i]);
}
};
for (var i = 0; i < selectedOptions.length; i++) {
selection2.appendChild(selectedOptions[i]);
}
});
重排序则需要利用到insertBefore()方法；
如果要让某个选项向上移动一格则：
var selection = document.getElementById("cars");
selection.insertBefore(selection.options[1],selection.options[0]);
或者按按钮让某个选项向上移动：
var selection = document.getElementById("cars");
var moveOptions = document.getElementById("transfer");
moveOptions.addEventListener("click", function() {
for (var i = 0, len = selection.options.length; i < len; i++) {
//如果这个选项被选中了，并且这个选项不是第一个
if ((selection.options[i].selected) && (selection.options[i] != selection.options[0]) ) {
//则选择的选项插入到前面的选项的前面
selection.insertBefore(selection.options[i], selection.options[i - 1]);
}
};
});
六、表单序列化
1.对表单字段的名称和值进行URL编码，使用和号（&）分隔
2.不发送禁用的表单字段
3.只发送勾选的复选框和单选按钮
4.不发送type为“reset”和“button”的按钮
5.多选框中每个选中的值单独一个条目
6.在单击提交按钮提交表单的情况下，也会发送提交按钮。否则不发送提交按钮。也包括type为“image”的input元素
7.select元素的值，就是选中的option元素的value特性值
实现表单序列化的代码：
function serialize(form) {
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for (var 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 (var j = 0, optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if (option.selected) {
optValuehttp://www.mamicode.com/= "";
if (option.hasAttributes) {
optValue = http://www.mamicode.com/((option.hasAttributes("value")) ? option.value : option.text);
} else {
optValue = http://www.mamicode.com/(option.attributes("value").specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined:
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if (!field.checked) {
break;
}
//这里没有break
default:
if (field.name.length) {
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
};
return parts.join("&");
}
这个函数首先定义了一个名为parts的数组，用于保存要创建的字符串的各个部分；
然后通过for循环迭代每个表单字段，并将其保存在field变量中；
用switch语句检测type属性；
最麻烦的就是select元素，因为他有单选和多选之分，还要检查是否存在value值，如果不存在就获取其text值，在DOM兼容的浏览器中需要使用hasAttribute()方法，在IE中则需要使用specified属性；
对于fieldset元素，没有type属性就不需要序列化；
其他诸如按钮文件输入字段等等都要忽略；
最后对于单选按钮和复选框，要检查其checked属性是否为false，如果是则退出switch语句；如果为true，则继续执行default语句（所以checkbox的break行代码后面没有break，而是default）；
default语句则是将当前字段的名称和值进行编码并添加到parts数组中；
最后就是利用join()函数格式化整个字符。
七、富文本编辑
在页面中嵌入一个包含空的HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面就可以被编辑，编辑对象就是body元素的HTML代码。designMode属性有两个可能的值：on和off（默认值）。
window.addEventListener("load", function () {
frames["firstFrame"].document.designMode = "on"; //这里返回错误信息"Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."是因为环境的问题，protocols为file，放在浏览器上就没有问题了。
});
- 使用contenteditable属性
只要把元素设置contenteditable属性就行了(它的属性值有3个，true表示打开，false表示关闭，inhert表示从父元素那里继承。)：
<div id="test" contenteditable>
<p id="texting">
hello
</p>
</div>
- 操作富文本ocument.execCommand()方法
与富文本编辑交互的方式，就是使用document.execCommand()。这个方法可以对文档执行预定义的命令，而且可以应用大多数格式。
可以为document.execCommand()方法传递3个参数：要执行的命令名称，表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值（不需要值，可设为null）。为了保证浏览器兼容，需要设置第二个参数为false。
另外在各浏览器对应的开发者站点 msdn.microsoft.com (MSDN)、developer.mozilla.org (Mozilla Developer Network)、developer.apple.com (Apple Developer)、dev.opera.com (Opera Developer Community) 中，MSDN 与 Mozilla Developer Network 均有详细的 execCommand 方法的首参数可选值描述，Opera Developer Community 有简要说明， Apple Developer 无任何可查资料。
不同浏览器支持的预定义命令不一样，下标是被支持最多的命令（加粗的）：
2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 目前尚未支持。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 目前尚未支持。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 目前尚未支持。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 目前尚未支持。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。
可以在任何时候使用这些命令来修改富文本区域的外观：
frames["framing"].document.execCommand("bold", false, null);
同样也使用于页面中contenteditable属性为“true”的区块，只要把框架的引用替换成当前窗口的document对象就可以了：
p.addEventListener("contextmenu", function () {
event.preventDefault();
document.execCommand("backcolor", false, "red");
});
上述代码当点击右键会将p元素的backgroundColor颜色变为red（在chrome上，这则代码会在p元素周围加上span代码并附上style属性）；
除了命令之外，还有一些与命令相关的方法。
第一个方法是queryCommandEnabled(),可以检验是否可以针对当前选择的文本或者当前插入字符处所在的位置执行相应的命令。这个方法接收一个参数：即要检测的命令。如果允许返回true。但并不意味着可以执行命令，只是该命令对当前文本可以或不可以执行。
console.log(document.queryCommandSupported("bold"));
第二个方法是queryCommandState()方法用来确定是否已将指定的命令应用到了选择的文本。
第三个方法是queryCommandValue()方法用于取得执行命令时传入的值。
- 富文本选区
在富文本编辑器中，使用框架（iframe）的getSelection()方法，可以确定实际选择的文本。这个方法是window对象和document对象的属性，调用它返回一个表示当前选择文本的selection对象。
每个Selection对象都有下面的属性：
anchorNode: 选区起点所在的节点
anchorOffset: 到达选区起点位置之前跳过的anchorNode中的字符数量
focusNode: 选区终点所在的节点
focusOffset: focusNode中包含在选区之内的字符数量
isCollapsed: 起点终点是否重合
rangeCount: 包含DOM范围的数量
type:
baseNode:
baseOffset:
extentNode:
extentOffset:
以及方法：
getRangeAt（index）: 返回索引对应的选区中的DOM范围
addRange（range）: 将指定的DOM范围添加到选区中
removeAllRanges: 移除所有DOM范围
removeRange（range）: 从选区中移除指定的DOM范围
collapse（node, offset）: 将选区折叠到指定节点中的相应的文本偏移位置
collapseToStart: 折叠到起点
collapseToEnd: 折叠到终点
extend（node,offset）: 通过将focusNode和focusOffset移动到指定的值来扩展选区
selectAllChildren（node）: 清除选区并选择指定节点的所有子节点
deleteFromDocument: 从文档中删除选区中的文本与document.execCommand("delete",false,null)相同
containsNode（node）: 确定指定的节点是否包含在选区中
toString(): 返回选区所包含的文本内容
empty:
setPosition:
setBaseAndExtent:
modify:
toString:
constructor:
如，获取选择的文本：
var selection = document.getSelection();
console.log(selection.toString());
又如当用户选择文本后右键改变目标style：
p.addEventListener("contextmenu", function() {
event.preventDefault();
document.execCommand(‘copy‘,‘‘);
//selection富文本选区
var selection = document.getSelection();
//获取选择的文本
var selectedText = selection.toString();
// 取得代表选区的范围
var range = selection.getRangeAt(0);
//新建一个span设置style的背景颜色为黄色
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);
});
部分旧版浏览器需要使用window.getSelection()或document.getSelection()；IE则需要使用它浏览器本身的text属性等。也可以使用htmlText属性和pasteHTML()方法等。
第14章表单脚本