移动端h5实现复制文本的功能，兼容ios

最新推荐文章于 2025-02-10 15:27:46 发布

原创最新推荐文章于 2025-02-10 15:27:46 发布 · 1.3k 阅读 ·

CC 4.0 BY-SA版权

〆bird in the pool✘✘

关注

分类：

前端开发

文章标签：

#javascript #前端

本文介绍了一个名为ClipboardTool的JavaScript类，它提供了一个copy方法，用于将给定的文本复制到用户剪贴板，并显示相应的提示信息。方法使用了`document.createElement`、`setAttribute`和`execCommand(copy)`等技术来实现复制功能。

直接上代码

class ClipboardTool {
  copy(text: anytoastText?: any) {
    const input = document.createElement('input');
    input.setAttribute('readonly''readonly');
    input.setAttribute('value'text || '');
    document.body.appendChild(input);
    input.setSelectionRange(0text.length);
    if (document.execCommand('copy')) {
      input.select();
      document.execCommand('copy');
      ToastTool.showMessage(toastText || '复制成功');
    } else {
      ToastTool.showMessage('复制失败');
    }
    document.body.removeChild(input);
  }
}

阅读完本文您可以尝试下面操作：