js复制内容到剪切板

1、在JavaScript中，复制内容到剪贴板（Clipboard）的标准方法是使用navigator.clipboard.writeText API。这个API允许网页在用户明确许可的情况下将文本复制到剪贴板。

以下是一个简单的示例：

// 假设我们有一个包含要复制文本的变量  
const textToCopy = '这是一段要复制到剪贴板的文本';  
  
// 复制文本到剪贴板的函数  
async function copyToClipboard(text) {  
  try {  
    // 使用 navigator.clipboard.writeText 复制文本  
    await navigator.clipboard.writeText(text);  
    console.log('文本已复制到剪贴板');  
  } catch (err) {  
    // 如果复制失败（例如，用户拒绝了权限），则显示错误消息  
    console.error('无法复制文本: ', err);  
  }  
}  
  
// 调用函数  
copyToClipboard(textToCopy);

请注意，由于安全性和隐私性的原因，这个API可能需要在用户与页面进行交互（如点击按钮）的上下文中调用，并且可能需要在HTTPS环境下运行。

如果你正在开发一个需要兼容旧版浏览器的应用，或者navigator.clipboard.writeText API在你的目标环境中不可用，你可能需要使用一些polyfill库，如clipboard.js，它提供了跨浏览器的解决方案。

2、使用clipboard.js库的基本示例：

<!-- 引入 clipboard.js 库 -->  
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>  
  
<button class="btn" data-clipboard-text="这是一段要复制到剪贴板的文本">复制</button>  
  
<script>  
  // 实例化 Clipboard，并传入相关的 DOM 元素  
  var clipboard = new ClipboardJS('.btn');  
  
  clipboard.on('success', function(e) {  
    console.log('文本已复制到剪贴板');  
    e.clearSelection(); // 清除选中状态  
  });  
  
  clipboard.on('error', function(e) {  
    console.error('无法复制文本: ', e);  
  });  
</script>

3、创建一个隐藏的textarea元素，并将要复制的文本内容设置为其值。

function copyText(text) {
    const input = document.createElement('textarea')
    input.value = text
    document.body.appendChild(input)
    input.focus()
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
}