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

【问题标题】：Why document.execCommand("copy") doesn't work?为什么 document.execCommand("copy") 不起作用？
【发布时间】：2021-02-08 09:50:32
【问题描述】：

我有以下Page

当我单击“单击此处复制”时，它会调用 document.execCommand("copy") 将一些文本复制到剪贴板并且可以正常工作。
但是，当我点击“打开弹出窗口”按钮时，它会在同一页面中打开一个 div（无 iframe），然后点击“单击此处复制” >", document.execCommand("copy") 不起作用。

重现步骤：

document.execCommand("copy") 有效：

但是，如果我打开弹出窗口，document.execCommand("copy") 不起作用

请问有人知道原因吗？

谢谢干杯，

这是我的全部代码：

    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>

【问题讨论】：

如果不提供证明问题的minimal reproducible example，任何人都很难在不猜测的情况下帮助解决此问题
我提供了可重现的示例。缺少什么？
问题应该是自包含的。没有问题的html
我正在使用生成整个页面的 Oracle Apex。不管怎样，谢谢。还有其他人有想法吗？是否有与叠加、焦点、z-index 相关的内容？
尝试设置 textaraea 的值而不是 text

标签： javascript html

【解决方案1】：

这是我的 copyTextToClipboard 函数的工作示例。请尝试添加textArea.focus电话。

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

【讨论】：

感谢您的回答。隐藏文档正文时似乎不起作用...
当前景中有东西时（例如具有更高z-index的div或其他东西......），文本区域被添加到正文但无法选择。因此副本不起作用。解决方案不是将文本区域添加到文档的正文中，而是添加到调用者自身，以便它始终位于前台并且可以选择。我发布了解决方案....

【解决方案2】：

这是问题的原因：

当有文档覆盖时，以下代码似乎不起作用。例如，当调用者位于具有更高 z-index 的 div 上时......我不确定究竟是什么导致此代码失败。但是好像跟overlayers，focusable elements什么的有关……事实上，当文档的body被隐藏时，创建的文本区域是无法对焦的，也就不起作用了。

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>

解决方案：

可以将文本区域添加到调用者本身，而不是将文本区域添加到文档正文中...因此它将始终位于前台。这假设要复制的文本很短，因此执行速度足够快，用户不会注意到文本区域的创建和删除...

        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>

【讨论】：