复制到剪贴板 JavaScript

Question

请参阅下面的答案。

另请参阅：如何在 JavaScript 中复制到剪贴板？对于较旧的方法。

---

原问题：

我希望能够在用户单击时复制表格单元格值。
我试过这个：

function copyToClipboard(text) {
    var selectTableCells = document.querySelector('td');

    selectTableCells.addEventListener('click', function(event) {
        console.log("You copied: ", selectTableCells);
        copyToClipboard(selectTableCells.innerHTML);
    });
}

td,
th {
  border: 1px solid #ccc;
  display: block;
  background-color: #ccc;
  width: 160px;
}
td {
  cursor: pointer;
  text-align: center;
}

<table id="table" class="responsive" style="width:1000px;">
  <tbody>
    <thead>
      <tr>
        <th>Field Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="cell1">Click me to copy!</td>
      </tr>
    </tbody>
</table>
</div>
<input type="text" style="height:50px;width:300px;" placeholder="For proof of concept. Try to paste here">

Answer 1

未来（2020）的答案：

现在有剪贴板 API

此代码片段从剪贴板获取文本并将其附加到使用类编辑器找到的第一个元素。由于如果剪贴板不是文本，则readText()(and ，就此而言) 返回空字符串，因此此代码是安全的。read()

navigator.clipboard.readText().then(
    clipText => document.querySelector(".editor").innerText += clipText);

方法：

注意：所有方法都会返回一个承诺

读（）

var getClipboardData = navigator.clipboard.read();

Clipboard 接口的方法read() 请求剪贴板内容的副本，返回一个 Promise。与 不同的是readText()，该read()方法可以返回任意数据，例如图像。此方法还可以返回文本。

读取文本()

var getClipboardText = navigator.clipboard.readText();

DataTransfer如果剪贴板为空、不包含文本或在表示剪贴板内容的对象中不包含文本表示形式，则返回空字符串。

写（）

var setClipboardData = navigator.clipboard.write(data);

如果剪贴板无法完成剪贴板访问，则承诺将被拒绝。

写文本()

var setClipboardText = navigator.clipboard.writeText(newClipText); 

如果调用者没有写入剪贴板的权限，则承诺将被拒绝。

接口：

Clipboard Secure context

提供用于从系统剪贴板读取文本和数据以及将文本和数据写入系统剪贴板的接口。该规范将此称为“异步剪贴板 API”。

ClipboardEvent Secure context

表示提供与剪贴板修改相关的信息的事件，即剪切、复制和粘贴事件。该规范将此称为“剪贴板事件 API”。

ClipboardItem Secure context

表示单个项目格式，在读取或写入数据时使用。

有关更多信息，请参阅剪贴板 API