javascript - 将表格单元格复制到剪贴板而不使用输入标签 - Javascript 和 html

Question

我有一个简单的功能，允许您单击任何表格单元格并将数据复制到剪贴板。该单元格还会闪烁红色，让您知道它已被复制。这工作正常，但您会注意到每个单元格中有一个输入标记(我发现的所有类似示例也使用输入或其他一些表单标记)我不需要输入，因为单元格中的数据不会改变。有没有办法在没有输入标签的情况下做到这一点。普通表格单元格中的数据是 innerHTML 可以通过单击复制吗？请不要使用 jQuery。

function myFunction(itemid) {
  var copyText = document.getElementById(itemid);
  copyText.select();
  document.execCommand("Copy");
  // blink red
  document.getElementById(itemid).style.backgroundColor="#FF0000";
  setTimeout(function(){document.getElementById(itemid).style.backgroundColor="#FFFFFF";},300);
}

::selection {background:none;}
input {outline:0;cursor:pointer}

<table>
<td><input type="text" value="Cheese" id="cell1" onclick="myFunction('cell1')"></td>
<td><input type="text" value="Crackers" id="cell2" onclick="myFunction('cell2')"></td><tr>

<td><input type="text" value="Milk" id="cell3" onclick="myFunction('cell3')"></td>
<td><input type="text" value="Bread" id="cell4" onclick="myFunction('cell4')"></td>
</table>

Answer 1

试试这个，动画由你决定

        let table = document.getElementById('tableId');

    table.addEventListener('click', (e) => {
        let target = e.target;
        if(target.localName === 'td') {
            let range = document.createRange();
            range.selectNodeContents(target);  
            let sel= document.getSelection(); 
            sel.removeAllRanges(); 
            sel.addRange(range); 

            document.execCommand('copy');
            sel.removeAllRanges();
            target.classList.add('copy-animate');
            setTimeout(() => {
                target.classList.remove('copy-animate');
            }, 200);
        }
    });