JavaScript實現複製和貼上功能

surpassLiang發表於2020-11-03
JavaScript

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>
  <!-- Target -->
  <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
  <!-- Trigger -->
  <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.注意事項

剪下板內容只允許為文字內容，如果為其他內容，會丟擲異常。

相關文章