How can I copy the code inside the `tag to the clipboard?`

Question

I tried this code but it doesn't work. How can I copy the code inside the <code> tag to the clipboard?

 <pre id="myCode">
   <code>
      console.log("hello world!")
   </code>
 </pre>

JavaScript

function copyScript(){
 document.getElementById('myCode').select();
 document.execCommand('copy');
}

Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — NicoCaldo, Mar 31 '21 at 20:05

score 1 · Accepted Answer · answered Mar 31 '21 at 20:23

The select() function can only be used on input elements such as <textarea> or <input>.

If you want to use it with your <code> tag, one way to accomplish it would be to copy the contents of the tag into a new <textarea> object and copy from that:

function copyScript() {
    // get the text to copy
    var codeText = document.getElementById('myCode').textContent;
    
    // create a textarea with the text we want to copy and add it to the page
    var textArea = document.createElement('textarea');
    textArea.textContent = codeText;
    document.body.append(textArea);
    
    // focus on the new textarea and copy the contents!
    textArea.focus();
    textArea.select();
    document.execCommand('copy');
}

@FurkanKarakuzu I don't think you need to rely on a framework for this, it's built-in to JavaScript. — newfurniturey, Apr 01 '21 at 14:38

score 1 · Answer 2 · answered Mar 31 '21 at 20:34

1

I would just do this for modern browsers

function copyToClipboard {
    let codeText = document.getElementById('myCode').textContent;
    // copying
    navigator.clipboard.writeText(codeText)
}

answered Mar 31 '21 at 20:34

Mudassar

508
4
13

How can I copy the code inside the tag to the clipboard?

2 Answers2

How can I copy the code inside the `tag to the clipboard?`