js点击复制功能的两种实现方式与如何禁用复制

关键API

• document.execCommand()方法
• 异步的 Clipboard API
• 禁用复制：copy事件document.execCommand('copy')

本文将介绍如何利用这3种api去实现

document.execCommand()已弃用 方法1

已弃用:  不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，该特性随时可能无法正常工作。

常用语法

• document.execCommand('copy')（复制）
• document.execCommand('cut')（剪切）
• document.execCommand('paste')（粘贴）
• 其他 详情

方法实现

/**
 * @componentsName 复制方法
 * @str 内容
 *
 */
export const copyOption = (str = '') => {
  const inputNode = document.createElement('input');
  inputNode.value = str;
  document.body.appendChild(inputNode);
  inputNode.select();
  document.execCommand('copy');
  notification.success({
    // 提示用户复制成功的信息提醒，根据自己实际需求加
    message: '温馨提示！',
    description: '内容复制成功！',
  });
  document.body.removeChild(inputNode);
};

一些网站点击复制时候会加一些作者信息，其实很简单，在原有方法加个参数就好。

/**
 * @componentsName 复制方法
 * @str 内容
 * @text 附加内容
 */
export const copyOption = (str = '', text) => {
  const inputNode = document.createElement('input');
  inputNode.value = `${str + text}作者： 逆风起飞`;
  document.body.appendChild(inputNode);
  inputNode.select();
  document.execCommand('copy');
  notification.success({
    // 提示用户复制成功的信息提醒，根据自己实际需求加
    message: '温馨提示！',
    description: '内容复制成功！',
  });
  document.body.removeChild(inputNode);
};

粘贴操作

粘贴时，调用document.execCommand('paste')，就会将剪贴板里面的内容，输出到当前的焦点元素中。

  const pasteText = document.querySelector('#input');
  pasteText.focus();
  document.execCommand('paste');

Navigator.clipboard 异步 方法2

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

只有在用户事先授予网站或应用对剪切板的访问许可之后(会以弹窗的形式询问用户是否授权)，才能使用异步剪切板读写方法。

兼容性： 使用该API注意其兼容性

常用语法

• navigator.clipboard.read() 从剪贴板读取数据（比如图片或文本），返回一个Promise对象。在检索到数据后，promise 将兑现一个 ClipboardItem 对象的数组来提供剪切板数据。
• navigator.clipboard.readText() 返回一个 Promise，在从剪切板中检索到文本后，promise 将返回一个string文本数据
• navigator.clipboard.write()写入任意数据至操作系统剪贴板。这是一个异步操作，在操作完成后，返回一个 promise 对象。
• navigator.clipboard.writeText()写入文本至操作系统剪贴板。返回一个 Promise，在文本被完全写入剪切板后，返回一个 promise 对象。
• 其他API 详情

方法实现

export const copyOption = (str = '') => {
  navigator.clipboard.writeText(str).then(() => {
    notification.success({
      // 提示用户复制成功的信息提醒，根据自己实际需求加
      message: '温馨提示！',
      description: '内容复制成功！',
    });
  });
};

如果需要添加附加内容同理。 粘贴操作

  navigator.clipboard.readText().then(clipText => {
    document.getElementById('outbox').innerText = clipText;
  });

禁用复制 方法3

当用户通过浏览器 UI（例如，使用 Ctrl/⌘+C 键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的document.execCommand('copy')调用时触发copy事件。

监听 copy 事件

  componentDidMount() {
    document.addEventListener('copy', e => {
      // 调用setData(format, data)把内容修改为想要的
      e.clipboardData.setData('text/plain', '作者： 逆风起飞');
      e.preventDefault();
    });
  }

上面示例中，事件对象e的clipboardData属性包含了剪贴板数据。它是一个对象，有以下属性和方法。

• Event.clipboardData.setData(type, data)：修改剪贴板数据，需要指定数据类型。
• Event.clipboardData.getData(type)：获取剪贴板数据，需要指定数据类型。
• Event.clipboardData.clearData([type])：清除剪贴板数据，可以指定数据类型。如果不指定类型，将清除所有类型的数据。
• Event.clipboardData.items：一个类似数组的对象，包含了所有剪贴项，不过通常只有一个剪贴项。

注意：不能使用clipboardData.getData()在事件处理函数中获取剪切板数据。

方法实现

    document.addEventListener('copy', e => {
      // 清除剪贴板数据
      e.clipboardData.clearData();
      e.preventDefault();
    });

小知识面对禁用复制的网站如何白嫖？

1. 确定该网站是使用 copy 事件实现禁用的
2. 打开控制台 Elements => body => Event Listener => 删除copy事件 3.在控制台使用removeEventListener方法移除监听事件。

亲测：大厂（如百度等）一般都是使用canvas 实现禁用复制的，此方法不行。热爱学习的小伙伴去学习下 canvas就知道怎么解决了。