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