javascript copy to clipboard function doesn't work

Question

I use this code to copy the text from ‘div1’ id to clipboard. It works but when i select other text in the page and tap the copy the text button it copies the selected text and not the div1 id text. I need every time to copy the div1 id text. What is wrong?

   <?php  
 echo <div id="div2">   

        '<button class="btn-light"  id="button1" onclick="CopyToClipboard(\'div1\')" 
        data-toggle="tooltip" title="Copy">Copy the text</button>

        <div id="div1" >  ';
        echo "copy it";

        echo '</div>';

echo '</div>'; 
   ?> 

      <script type='text/javascript'>

                                    function CopyToClipboard(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select().createTextRange();
            document.execCommand("copy");


        } else if (window.getSelection) {
            var range = document.createRange();
             range.selectNode(document.getElementById(containerid));
             window.getSelection().addRange(range);
             document.execCommand("copy");
             alert("Copied")

        </script>

score 1 · Accepted Answer · answered Jun 30 '19 at 21:50

This might work. I am using FireFox, although it is going to deselect the other selection, select your div, and then copy it to the clipboard. I suppose there is a way to execute the copy and then return things to the state before execution of your function.

function CopyToClipboard(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().empty();
            window.getSelection().addRange(range);
        }
        document.execCommand("Copy");
}

<div id="div2">   

   <button class="btn-light"  id="button1" onclick="CopyToClipboard('div1')" data-toggle="tooltip" title="Copy">Copy the text</button>

     <div id="div1" >copy it</div>
     <div id="div3">Other Text</div>
     
</div>

score 1 · Answer 2 · answered Jun 30 '19 at 22:01

I hope I interpreted your question correctly. You can modify that to keep the original selection after you copy you div to the clipboard. Fast enough that the user probably would even notice.

var savedSelection;
function CopyToClipboard(containerid) {

   if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            savedSelection = sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        savedSelection =  document.selection.createRange();
    }
    
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
        
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().empty();
        window.getSelection().addRange(range);
    }
    
    document.execCommand("Copy");
    
    if (savedSelection) {
    
    if (window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(savedSelection);
        
    } else if (document.selection && savedSelection.select) {
        savedSelection.select();
    }
}
}

<div id="div2">   

   <button class="btn-light"  id="button1" onclick="CopyToClipboard('div1')" data-toggle="tooltip" title="Copy">Copy the text</button>
   <div id="div1" >copy it</div>
   <div id="div3">Other Text</div>
     
</div>

<p>
Other Text for testing restoration.
</p>

javascript copy to clipboard function doesn't work

2 Answers2