复制地址js

在JavaScript中，复制地址通常指的是将一个URL或文本内容复制到用户的剪贴板中。以下是一些基础概念和相关实现方法：

基础概念

Clipboard API: 现代浏览器提供的API，允许开发者直接与用户的剪贴板进行交互。
execCommand: 一个较旧的方法，用于执行命令，如复制文本，但已被现代浏览器弃用。

实现方法

使用 Clipboard API

Clipboard API 提供了一种更简洁和安全的方式来处理剪贴板操作。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

// 使用示例
const url = "https://example.com";
copyToClipboard(url);

优势:

简洁明了。
支持异步操作，不会阻塞主线程。
更好的用户体验和安全性。

应用场景:

用户点击按钮复制邀请链接。
自动填充表单后复制数据以供用户粘贴。

使用 execCommand（不推荐）

虽然 execCommand 已被弃用，但在一些旧版浏览器中仍然可以使用。

function copyToClipboardWithExecCommand(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  try {
    const successful = document.execCommand('copy');
    const msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.error('Unable to copy text', err);
  }
  document.body.removeChild(textarea);
}

// 使用示例
const url = "https://example.com";
copyToClipboardWithExecCommand(url);

问题及原因: