2.2. Document.execCommand()

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。