前端javascript复制功能

// 复制文本内容方法一
export const copyContent = (content) => {
  // 复制结果
  let copyResult = true;
  // 设置想要复制的文本内容
  const text = content || '让我们一起快乐的敲代码吧~';

  // 判断是否支持clipboard方式
  if (window.navigator.clipboard) {
    // 利用clipboard将文本写入剪贴板（这是一个异步promise）
    window.navigator.clipboard
      .writeText(text)
      .then((res) => {
        console.log('复制成功');

        // 返回复制操作的最终结果
        return copyResult;
      })
      .catch((err) => {
        console.log('复制失败--采取第二种复制方案', err);
        // clipboard方式复制失败 则采用document.execCommand()方式进行尝试
        copyContent2(text);
      });
  } else {
    // 不支持clipboard方式 则采用document.execCommand()方式
    copyContent2(text);
  }
};

// 复制文本内容方法二
export function copyContent2(text) {
  // 复制结果
  let copyResult = true;
  // 创建一个input元素
  let inputDom = document.createElement('textarea');

  // 设置为只读 防止移动端手机上弹出软键盘
  inputDom.setAttribute('readonly', 'readonly');
  // 给input元素赋值
  inputDom.value = text;
  // 将创建的input添加到body
  document.body.appendChild(inputDom);
  // 选中input元素的内容
  inputDom.select();

  // 执行浏览器复制命令
  // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
  // Input要在正常的编辑状态下原生复制方法才会生效
  const result = document.execCommand('copy');

  // 判断是否复制成功
  if (result) {
    console.log('复制成功');
  } else {
    console.log('复制失败');
    copyResult = false;
  }

  // 复制操作后再将构造的标签 移除
  document.body.removeChild(inputDom);

  // 返回复制操作的最终结果
  return copyResult;
}