Kopieren von Tabellenzellen in die Zwischenablage ohne Eingabe Tags - Javascript und HTML

Question

Ich habe diese einfache Funktion, die Sie auf eine beliebige Tabellenzelle klicken können, und es kopiert die Daten in die Zwischenablage. Die Zelle blinkt auch rot, um Sie wissen zu lassen, dass sie kopiert wurde. Das funktioniert gut, aber Sie werden feststellen, dass es in jeder Zelle ein Eingabe-Tag gibt (alle ähnlichen Beispiele, die ich fand, verwendeten auch Eingaben oder andere Formular-Tags). Ich brauche keine Eingaben, weil sich die Daten in meinen Zellen nicht ändern . Gibt es eine Möglichkeit, dies ohne Eingabe-Tags zu tun? Würden die Daten in einer normalen Tabellenzelle innerHTML sein Kann das onclick kopiert werden? Bitte keine 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

diese versuchen, ist die Animation an Ihnen

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