2025年3月16日 星期日 甲辰(龙)年 月十五 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

js复制文本到剪贴板

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

在 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 方法在一些浏览器中仍然能够提供兼容性。最好根据你的项目需求和浏览器支持情况来选择使用哪种方法。

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