为什么 document.execCommand("copy") 不起作用？

Question

I have the following Page

• When I click " Click Here To Copy ", it calls document.execCommand("copy") to copy some text to the clipboard and it works.
• However, when I hit the button " Open popup ", it opens a div in the same page (no iframe), then when clicking on " Click Here To Copy ", document.execCommand("copy") doesn't work .

Steps to reproduce :

document.execCommand("copy") works :

However if I open the popup, document.execCommand("copy") doesn't work

Does anyone know the reason for that please ?

Thanks cheers,

Here is my entire code :

    function CopyToClipBoard(d){        
        var c=document.createElement("textarea");
        c.innerText=d;
        document.body.appendChild(c);       
        
        c.select();
        document.execCommand("copy");
        document.body.removeChild(c);
    }

   <div onclick="CopyToClipBoard('text to be copied')">Click Here To copy</div>

Answer 1

Here is my working example of copyTextToClipboard function. Please try to add textArea.focus call.

    const fallbackCopyTextToClipboard = text => {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      textArea.style.position = 'fixed';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
    }
    
    const copyTextToClipboard = text => {
      if (navigator.clipboard) {
        return navigator.clipboard.writeText(text);
      }
      return new Promise((resolve, reject) => {
        fallbackCopyTextToClipboard(text);
        resolve();
      });
    };

Answer 2

Here is the cause of the problem :

The following code doesn't seem to work when there is an overlay of a document. For example when the caller is on a div with higher z-index or something... I'm not sure on what exactly causes this code to fail. But it seems related to overlayers, focusable elements or something... The fact is that, when the body of the document is hidden, the created text area is unable to focus and it doesn't work.

function CopyToClipBoard(d){        
    var c=document.createElement("textarea");
    c.innerText=d;
    document.body.appendChild(c);       
    
    c.select();
    document.execCommand("copy");
    document.body.removeChild(c);
}

<div onclick="CopyToClipBoard('text to be copied')">Click Here To copy</div>  

Solution :

Instead of adding the text area to the body of the document, it can be added to the caller itself... Hence it will always be in the foreground. This assumes the text to copy is short such that the execution is fast enough for the user not to notice the creation and the removal of the text area...

        function CopyToClipBoard(item, d){  
                var c=document.createElement("textarea");
                c.value=d;
                c.style.maxWidth = '0px';
                c.style.maxHeight = '0px';
                item.appendChild(c);

                c.focus();        
                c.select();
                document.execCommand("copy");
                item.removeChild(c);
        }


        <div onclick="CopyToClipBoard(this,'text to be copied')">Click Here To copy</div>