javascript - 复制到剪贴板 Javascript

Question

请参阅下面的答案。

另见:How do I copy to the clipboard in JavaScript?对于旧方法。

---

Original question:

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

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

来自 future (2020)的答案:

---

现在有一个剪贴板 API

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

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

方法:

注意:所有方法都返回一个 promise

读取()

var getClipboardData = navigator.clipboard.read();

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

读取文本()

var getClipboardText = navigator.clipboard.readText();

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

写()

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

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

写文本()

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

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

---

接口(interface):

剪贴板安全上下文

提供一个接口(interface)，用于从系统剪贴板读取和写入文本和数据。规范将此称为“异步剪贴板 API”。

ClipboardEvent 安全上下文

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

ClipboardItem 安全上下文

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

---

有关详细信息，请参阅 Clipboard API