您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

js复制文本到剪贴板

时间:12-03来源:作者:点击数:

在 JavaScript 中,你可以使用 Clipboard API 或者 Document.execCommand 方法来复制文本到剪贴板。Clipboard API 是现代浏览器中推荐使用的方式,但为了兼容性,我们也会提到 Document.execCommand 方法。

使用 Clipboard API

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text successfully copied to clipboard');
    })
    .catch(err => {
      console.error('Unable to copy text to clipboard', err);
    });
}

// 使用示例
const textToCopy = 'Hello, Clipboard!';
copyToClipboard(textToCopy);

这个例子中,我们定义了一个 copyToClipboard 函数,它使用 navigator.clipboard.writeText(text) 来异步写入文本到剪贴板。这个方法返回一个 Promise,可以通过 .then() 处理成功的情况,或者通过 .catch() 处理失败的情况。

使用 Document.execCommand 方法

function copyToClipboardLegacy(text) {
  const textArea = document.createElement('textarea');
  textArea.value = text;

  // 将 textarea 元素添加到 DOM 中
  document.body.appendChild(textArea);

  // 选择文本
  textArea.select();

  try {
    // 尝试执行复制命令
    document.execCommand('copy');
    console.log('Text successfully copied to clipboard');
  } catch (err) {
    console.error('Unable to copy text to clipboard', err);
  } finally {
    // 移除添加的 textarea 元素
    document.body.removeChild(textArea);
  }
}

// 使用示例
const textToCopyLegacy = 'Hello, Clipboard (legacy)!';
copyToClipboardLegacy(textToCopyLegacy);

这个例子中,我们创建了一个临时的 textarea 元素,将文本赋值给它,然后将它添加到 DOM 中,选择文本,执行复制命令,最后将它从 DOM 中移除。这是为了模拟将文本复制到剪贴板的操作。

请注意,使用 Clipboard API 是更现代、更可靠的方式,但 Document.execCommand 方法在一些浏览器中仍然能够提供兼容性。最好根据你的项目需求和浏览器支持情况来选择使用哪种方法。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门