js实现复制功能(多种方法集合)

在JavaScript中实现复制功能有多种方法，以下是几种常用的方法集合：

1. 使用document.execCommand()方法：

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

这个方法创建一个临时的input元素，并将要复制的文本赋值给它的value属性，然后将元素添加到document中。然后使用select()方法来选择input中的文本，使用document.execCommand('copy')将文本复制到剪贴板，最后再将临时input元素从document中移除。

2. 使用Clipboard API：

   function copyText(text) {
     navigator.clipboard.writeText(text)
       .then(() => {
         console.log('Text copied to clipboard');
       })
       .catch((error) => {
         console.error('Failed to copy text: ', error);
       });
   }

这种方法使用了现代浏览器提供的Clipboard API，可以直接使用navigator.clipboard对象来访问剪贴板。通过调用writeText()方法并传入要复制的文本，可以将文本复制到剪贴板。

3. 使用ZeroClipboard库：
ZeroClipboard是一个轻量级的JavaScript库，可以实现复制功能。使用该库需要先引入ZeroClipboard.js文件，然后可以通过以下代码实现复制功能：

   var clipboard = new ZeroClipboard(document.getElementById('copy-button'));
   clipboard.on('ready', function(event) {
     clipboard.on('aftercopy', function(event) {
       console.log('Text copied to clipboard');
     });
   });

这个方法创建了一个ZeroClipboard对象并传入要复制的按钮元素，然后通过监听ready和aftercopy事件来实现复制功能。

以上是几种常见的方法集合，根据实际需求和浏览器兼容性可以选择合适的方法来实现复制功能。