Document.execCommand()
是操作剪贴板的传统方法,各种浏览器都支持。它支持复制、剪切和粘贴这三个操作。
document.execCommand('copy')
(复制)document.execCommand('cut')
(剪切)document.execCommand('paste')
(粘贴)
2.2.1. 复制操作
- 复制时,先选中文本,然后调用
document.execCommand('copy')
,选中的文本就会进入剪贴板。const inputElement = document.querySelector('#input'); inputElement.select(); document.execCommand('copy');
- 上面示例中,脚本先选中输入框
inputElement
里面的文字(inputElement.select()
),然后document.execCommand('copy')
将其复制到剪贴板。 - 注意,复制操作最好放在事件监听函数里面,由用户触发(比如用户点击按钮)。如果脚本自主执行,某些浏览器可能会报错。
2.2.2. 粘贴操作
- 粘贴时,调用
document.execCommand('paste')
,就会将剪贴板里面的内容,输出到当前的焦点元素中。const pasteText = document.querySelector('#output'); pasteText.focus(); document.execCommand('paste');
2.2.3. 缺点
Document.execCommand()
方法虽然方便,但是有一些缺点。- 首先,它只能将选中的内容复制到剪贴板,无法向剪贴板任意写入内容。
- 其次,它是同步操作,如果复制/粘贴大量数据,页面会出现卡顿。有些浏览器还会跳出提示框,要求用户许可,这时在用户做出选择前,页面会失去响应。
- 为了解决这些问题,浏览器厂商提出了异步的 Clipboard API。