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