复制到剪贴板 Javascript

Question

请参阅下面的答案。

另请参阅：How do I copy to the clipboard in JavaScript? 旧方法。

Original question:

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

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

尝试此属性 contenteditable="true" 并尝试按照此 link 复制剪贴板内容， execute ctrl + c

Answer 2

来自未来（2020）的答案：

现在有一个剪贴板API

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

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

方法：

注意：所有方法return一个承诺

阅读()

var getClipboardData = navigator.clipboard.read();

剪贴板接口的 read() 方法请求剪贴板内容的副本，return 是一个 Promise。与readText()不同，read()方法可以return任意数据，例如images。这个方法也可以return text.

readText()

var getClipboardText = navigator.clipboard.readText();

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

写()

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

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

writeText()

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

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

接口：

Clipboard Secure context

提供用于从系统剪贴板读取和写入文本和数据的接口。规范将此称为 'Async Clipboard API.'

ClipboardEvent Secure context

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

ClipboardItem Secure context

表示单项格式，读写数据时使用。

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

复制到剪贴板 Javascript

Copy To Clipboard Javascript

javascript

html-table

来自未来（2020）的答案：

方法：

阅读()

readText()

写()

writeText()

接口：