JavaScript实现复制和粘贴功能

以你之姓@ 2022-11-22 00:25 288阅读 0赞

### 1.前期准备 ###

考虑到兼容性，我们实现复制功能使用clipboard.js框架。参照如下地址下载：

> [https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js][https_cdn.bootcss.com_clipboard.js_2.0.1_clipboard.js]

粘贴功能采用原生JS。

### 2.直接贴代码 ###

粘贴功能使用前需要鼠标单击一下表格部分。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script type="text/javascript" src="./js/clipboard.js"></script>
    </head>
    
    <body>
      
      <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
      
      <button class="copy"> Copy to clipboard</button>
      <button id="paste">paste</button>
      <table id="pasteContent">
        <tr>
          <td>序号</td>
          <td>名称</td>
          <td>编号</td>
        </tr>
      </table>
      <script>
        var clipboard = new ClipboardJS('.copy', {
          text: function (trigger) {
            return doCopy();
          }
        });
        var pastBtn = document.getElementById('pasteContent');
        pastBtn.addEventListener('paste', function (event) {
          if (event.clipboardData || event.originalEvent) {
            var clipboardData = (event.clipboardData || window.clipboardData);
            var val = clipboardData.getData('text');
            if (val) {
              doPast(val);
            } else {
              throw new Error("剪切板内容为空或者非文本类型");
            }
    
            event.preventDefault();
          }
        });
        //获取要复制到剪切板的内容
        function doCopy() {
          return document.getElementById("foo").value;
        }
    
        //处理剪切板内容
        function doPast(value) {
          alert(value);
        }
      </script>
    </body>
    
    </html>

### 3.注意事项 ###

剪切板内容只允许为文本内容，如果为其他内容，会抛出异常。

![2020110313364186.png][]

[https_cdn.bootcss.com_clipboard.js_2.0.1_clipboard.js]: https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js
[2020110313364186.png]: /images/20221120/ad44e16b11b142e0af40163f9c38322e.png