Question

我有这个简单的功能，允许您单击任何表格单元格，并将数据复制到剪贴板。单元格也会闪烁红色，让您知道它被复制了。这很好用，但你会注意到每个单元格中都有一个输入标签（我发现的所有类似例子也使用了输入或其他形式标签）我不需要输入因为数据在我的细胞不会改变。有没有输入标签这样做的方法。普通表格单元格中的数据是innerHTML可以复制点击吗？请不要jQuery。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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);
        }
    });

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

1 个答案: