在没有输入标签的情况下将 table 个单元格复制到剪贴板 - Javascript 和 html

Question

我有这个简单的功能，允许您单击任何 table 单元格并将数据复制到剪贴板。该单元格也会闪烁红色，让您知道它已被复制。这工作正常，但你会注意到每个单元格中都有一个输入标签（我发现的所有类似示例也使用了输入或其他一些表单标签）我不需要输入，因为我的单元格中的数据不会改变.有没有办法在没有输入标签的情况下做到这一点。正常 table 单元格中的数据会是 innerHTML 可以复制 onclick 吗？没有 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);
        }
    });

在没有输入标签的情况下将 table 个单元格复制到剪贴板 - Javascript 和 html

Copying table cells to clipboard without input tags - Javascript and html

html

javascript

forms

clipboard