- 创建一个只读的富文本框,通过定位让它消失在可视内容区域,将我们需要复制的内容放到文本框内暂存,选中文本框内内容, 通过执行execCommand函数复制内容,最后去除文本框,执行回调函数。
export const copyValue = (val, cb) => {
const textarea = document.createElement('textarea');
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
textarea.value = val;
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
document.execCommand('Copy');
document.body.removeChild(textarea);
if (cb && Object.prototype.toString.call(cb) === '[object Function]'){
cb();
};
};
扩展execCommand函数
- document.execCommand(sCommand[,交互方式, 动态参数]) ,其中:sCommand为指令参数,交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框。
- 指令参数合集
参数 | 说明 | 参数 | 说明 |
| ------------------------- | ----------------------------------------------- | ------------------------ | ---------------------------------------------- |
| 2D-Position | 允许通过拖曳移动绝对定位的对象 | InsertParagraph | 用换行覆盖当前选中区 |
| AbsolutePosition | 设定元素的 position 属性为“absolute”(绝对) | InsertSelectDropdown | 用下拉框控件覆盖当前选中区 |
| BackColor | 设置或获取当前选中区的背景颜色 | InsertSelectListbox | 用列表框控件覆盖当前选中区 |
| BlockDirLTR | 目前尚未支持 | InsertTextArea | 用多行文本输入控件覆盖当前选中区 |
| BlockDirRTL | 目前尚未支持 | InsertUnorderedList | 切换当前选中区是项目符号列表还是常规格式化块 |
| Bold | 切换当前选中区的粗体显示与否 | Italic | 切换当前选中区斜体显示与否 |
| BrowseMode | 目前尚未支持 | JustifyCenter | 将当前选中区在所在格式化块置中 |
| Copy | 将当前选中区复制到剪贴板 | JustifyFull | 目前尚未支持 |
| CreateBookmark | 创建一个书签锚或获取当前选中区或插入点的书签锚的名称 | JustifyLeft | 将当前选中区所在格式化块左对齐 |
| CreateLink | 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL | JustifyNone | 目前尚未支持 |
| Cut | 将当前选中区复制到剪贴板并删除之 | JustifyRight | 将当前选中区所在格式化块右对齐 |
| Delete | 删除当前选中区 | LiveResize | 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新 |
| DirLTR | 目前尚未支持 | MultipleSelection | 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素 |
| DirRTL | 目前尚未支持 | Open | 目前尚未支持 |
| EditMode | 目前尚未支持 | Outdent | 减少选中区所在格式化块的缩进 |
| FontName | 设置或获取当前选中区的字体 | OverWrite | 切换文本状态的插入和覆盖 |
| FontSize | 设置或获取当前选中区的字体大小 | Paste | 用剪贴板内容覆盖当前选中区 |
| ForeColor | 设置或获取当前选中区的前景(文本)颜色 | PlayImage | 目前尚未支持 |
| FormatBlock | 设置当前块格式化标签 | Print | 打开打印对话框以便用户可以打印当前页 |
| Indent | 增加选中文本的缩进 | Redo | 目前尚未支持 |
| InlineDirLTR | 目前尚未支持 | Refresh | 刷新当前文档 |
| InlineDirRTL | 目前尚未支持 | RemoveFormat | 从当前选中区中删除格式化标签 |
| InsertButton | 用按钮控件覆盖当前选中区 | RemoveParaFormat | 目前尚未支持 |
| InsertFieldset | 用方框覆盖当前选中区 | SaveAs | 将当前 Web 页面保存为文件 |
| InsertHorizontalRule | 用水平线覆盖当前选中区 | SelectAll | 选中整个文档 |
| InsertIFrame | 用内嵌框架覆盖当前选中区 | SizeToControl | 目前尚未支持 |
| InsertImage | 用图像覆盖当前选中区 | SizeToControlHeight | 目前尚未支持 |
| InsertInputButton | 用按钮控件覆盖当前选中区 | SizeToControlWidth | 目前尚未支持 |
| InsertInputCheckbox | 用复选框控件覆盖当前选中区 | Stop | 目前尚未支持 |
| InsertInputFileUpload | 用文件上载控件覆盖当前选中区 | StopImage | 目前尚未支持 |
| InsertInputHidden | 插入隐藏控件覆盖当前选中区 | StrikeThrough | 目前尚未支持 |
| InsertInputImage | 用图像控件覆盖当前选中区 | Subscript | 目前尚未支持 |
| InsertInputPassword | 用密码控件覆盖当前选中区 | Superscript | 目前尚未支持 |
| InsertInputRadio | 用单选钮控件覆盖当前选中区 | UnBookmark | 从当前选中区中删除全部书签 |
| InsertInputReset | 用重置控件覆盖当前选中区 | Underline | 切换当前选中区的下划线显示与否 |
| InsertInputSubmit | 用提交控件覆盖当前选中区 | Undo | 目前尚未支持 |
| InsertInputText | 用文本控件覆盖当前选中区 | Unlink | 从当前选中区中删除全部超级链接 |
| InsertMarquee | 用空字幕覆盖当前选中区 | Unselect | 清除当前选中区的选中状态 |
| InsertOrderedList | 切换当前选中区是编号列表还是常规格式化块