execCommand函数语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回值
一个 Boolean ,如果是 false 则表示操作不被支持或未被启用。
参数解释
参数 |
描述 |
aCommandName |
一个 DOMString ,命令的名称。可用命令列表请参阅 命令 |
aShowDefaultUI |
一个 Boolean, 是否展示用户界面,一般为 false。Mozilla 没有实现 |
aValueArgument |
一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null |
支持的命令
命令 |
描述 |
2D-Position |
允许通过拖曳移动绝对定位的对象 |
AbsolutePosition |
设定元素的 position 属性为“absolute”(绝对) |
BackColor |
设置或获取当前选中区的背景颜色 |
Bold |
切换当前选中区的粗体显示与否 |
Copy |
将当前选中区复制到剪贴板 |
CreateBookmark |
创建一个书签锚或获取当前选中区或插入点的书签锚的名称 |
CreateLink |
在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL |
Cut |
将当前选中区复制到剪贴板并删除之 |
Delete |
删除当前选中区 |
FontName |
设置或获取当前选中区的字体 |
FontSize |
设置或获取当前选中区的字体大小 |
ForeColor |
设置或获取当前选中区的前景(文本)颜色 |
FormatBlock |
设置当前块格式化标签 |
Indent |
增加选中文本的缩进 |
InsertButton |
用按钮控件覆盖当前选中区 |
InsertFieldset |
用方框覆盖当前选中区 |
InsertHorizontalRule |
用水平线覆盖当前选中区 |
InsertIFrame |
用内嵌框架覆盖当前选中区 |
InsertImage |
用图像覆盖当前选中区 |
InsertInputButton |
用按钮控件覆盖当前选中区 |
InsertInputCheckbox |
用复选框控件覆盖当前选中区 |
InsertInputFileUpload |
用文件上载控件覆盖当前选中区 |
InsertInputHidden |
插入隐藏控件覆盖当前选中区 |
InsertInputImage |
用图像控件覆盖当前选中区 |
InsertInputPassword |
用密码控件覆盖当前选中区 |
InsertInputRadio |
用单选钮控件覆盖当前选中区 |
InsertInputReset |
用重置控件覆盖当前选中区 |
InsertInputSubmit |
用提交控件覆盖当前选中区 |
InsertInputText |
用文本控件覆盖当前选中区 |
InsertMarquee |
用空字幕覆盖当前选中区 |
InsertOrderedList |
切换当前选中区是编号列表还是常规格式化块 |
InsertParagraph |
用换行覆盖当前选中区 |
InsertSelectDropdown |
用下拉框控件覆盖当前选中区 |
InsertSelectListbox |
用列表框控件覆盖当前选中区 |
InsertTextArea |
用多行文本输入控件覆盖当前选中区 |
InsertUnorderedList |
切换当前选中区是项目符号列表还是常规格式化块 |
Italic |
切换当前选中区斜体显示与否 |
JustifyCenter |
将当前选中区在所在格式化块置中 |
JustifyLeft |
将当前选中区所在格式化块左对齐 |
JustifyRight |
将当前选中区所在格式化块右对齐 |
LiveResize |
迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新 |
MultipleSelection |
允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素 |
Outdent |
减少选中区所在格式化块的缩进 |
OverWrite |
切换文本状态的插入和覆盖 |
Paste |
用剪贴板内容覆盖当前选中区 |
Print |
打开打印对话框以便用户可以打印当前页 |
Refresh |
刷新当前文档 |
RemoveFormat |
从当前选中区中删除格式化标签 |
SaveAs |
将当前 Web 页面保存为文件 |
SelectAll |
选中整个文档 |
UnBookmark |
从当前选中区中删除全部书签 |
Underline |
切换当前选中区的下划线显示与否 |
Unlink |
从当前选中区中删除全部超级链接 |
Unselect |
清除当前选中区的选中状态 |
代码实例
<!DOCTYPE html>
<html>
<head>
<title>JavaScript--execCommand指令集</title>
<script>
<!--
function fn_doufucopy(){
edit.select();
document.execCommand('Copy');
}
function fn_doufupaste() {
tt.focus();
document.execCommand('paste');
}
function fn_creatlink()
{
document.execCommand('CreateLink',true,'true');
}
function fn_change_backcolor()
{
document.execCommand('BackColor',true,'#FFbbDD');
}
function fn_change_forecolor()
{
document.execCommand('ForeColor',false,'#BBDDCC');
document.execCommand('FontSize',false,7);
document.execCommand('FontName',false,'标楷体');
document.execCommand('Bold');
document.execCommand('Italic');
}
function fn_change_selection()
{
document.execCommand('Underline');
document.execCommand('StrikeThrough');
document.execCommand('SuperScript');
document.execCommand('Underline');
}
function fn_format()
{
document.execCommand('InsertOrderedList');
document.execCommand('InsertUnorderedList');
document.execCommand('Indent');
}
function fn_CutOrDel()
{
document.execCommand('Cut');
}
function fn_InsObj()
{
document.execCommand('InsertSelectDropdown',true,"aa");
}
function fn_save()
{
document.execCommand('SaveAs','mycodes.txt');
}
-->
</script>
</head>
<body>
<input id="edit" value="范例" NAME="edit"><br>
<button onclick="fn_doufucopy()" ID="Button1">Copy</button> <button onclick="fn_doufupaste()" ID="Button2">paste</button><br>
<textarea id="tt" rows="10" cols="50" NAME="tt"></textarea>
<hr>
<br>
浮沉聚散变化又再,但是总可卷土重来.<br>
天若有情天亦老,人间正道是沧桑.<br>
都怪我,太执着,却也等不到花开叶落.<br>
<br>
Please select above letters, then click following buttons:<br>
<hr>
<input type="button" value="创建CreateLink" onclick="fn_creatlink()" ID="Button3" NAME="Button3"><br>
<input type="button" value="改变文字背景色" onclick="fn_change_backcolor()" ID="Button4" NAME="Button4"><br>
<input type="button" value="改变文字前景色" onclick="fn_change_forecolor()" ID="Button5" NAME="Button5"><br>
<input type="button" value="给文字加线条" onclick="fn_change_selection()" ID="Button6" NAME="Button6"><br>
<input type="button" value="改变文字的排列" onclick="fn_format()" ID="Button7" NAME="Button7"><br>
<input type="button" value="删除或剪下选中的部分" onclick="fn_CutOrDel()" ID="Button8" NAME="Button8"><br>
<input type="button" value="插入Object" onclick="fn_InsObj()" ID="Button9" NAME="Button9"><br>
<input type="button" value="保存或打印文件" onclick="fn_save()" ID="Button10" NAME="Button10"><br>
<input type="button" value="测试Refresh属性" onclick="document.execCommand('Refresh')" ID="Button11"
NAME="Button11">
</body>
</html>
参考资料
- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
- https://www.w3cschool.cn/javascript/javascript-execcommand.html