how to copy div content into clipboard

Question

i have a div with id copy and a button.i want when that button is clicked i copy the div content into the clipboard

function myFunction() {
    var copyText = document.getElementById("copy");
    copyText.innerHTML=html;
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

that is what i have tried so far but does not seem to work. please help me. how can i go about this??

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) — hagello, Mar 18 '20 at 19:49

score 2 · Answer 1 · answered Jul 12 '21 at 09:36

I used this method and it worked:

function CopyToClipboard(id){
    var r = document.createRange();
    r.selectNode(document.getElementById(id));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(r);
    try {
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        console.log('Successfully copy text: hello world ' + r);
    } catch (err) {
        console.log('Unable to copy!');
    }
}

<div id="div_id">Hello World From div Content</div> 
<button type="button" onclick="CopyToClipboard('div_id')">Copy text</button>

i got this code from here.

Jeff Vdovjak · Accepted Answer · 2020-03-19T18:07:37.333

I have only been able to copy text from <input> and <textarea>. So my strategy was to copy the text from the <div> to a invisible <textarea>.

But I couldn't get the copy.value to display in the alert properly (it cancelled the clipboard copy for some reason). So I just used the value of the copyText

function myFunction() {
  // get the div contents
  let copyText = document.getElementById("copy").innerHTML;

  // get the textarea element
  var copy = document.getElementById("copyTextarea");

  // move the content from the div to the textarea
  copy.value = copyText;

  // select the content inside the textarea
  copy.select();
  copy.setSelectionRange(0, 99999);

  // copy to the clipboard
  document.execCommand("copy");

  // alert
  alert("Copied the text: " + copyText);
}

You'd need to create your <div> and your <textarea>:

<div id="copy" onclick="myFunction()">Simple Test</div>
<textarea style="display: none;" id="copyTextarea"></textarea>

score 0 · Answer 3 · answered Dec 01 '22 at 08:22

0

    //In HTML
    <button type="button" id="copy">COPY</button>
    <div id="output"></div>

    //In Javascript
    let copyBtn = document.getElementById('copy');//Get The Div


    copyBtn.addEventListener('click', () => {

        const text = document.getElementById('output').innerText
        
        navigator.clipboard.writeText(text);
    })

answered Dec 01 '22 at 08:22

Shaikh Mohammed Sohel

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 04 '22 at 12:36

how to copy div content into clipboard

3 Answers3