使用execCommand（Javascript）将隐藏的文本复制到剪贴板

小编典典

使用execCommand（Javascript）将隐藏的文本复制到剪贴板

html

我正在尝试不使用Flash复制到剪贴板，如果浏览器与javascript方法不兼容，我打算使用ZeroClipboard退回到Flash
。

我有一个类似按钮的onClick侦听器：

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied);
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
}

和一个输入字段，如下所示：

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo"/>

当前，这可以按预期工作，但是设计要求包含要复制的文本的字段不可见。我尝试了两种设置type="hidden"，style="display:none"但都没有成功。两者都会导致按钮选择整个页面并将整个内容复制到用户的剪贴板。
我比较有信心，原因不是基于浏览器，而是为了防万一，我正在MacOSX10.10.4的Chrome（版本43.0.2357.134（64位））上进行测试。

有什么方法可以保持在隐藏时可见的功能？还是我可以选择替代路线？

我知道类似的问题，这些问题都不是我的问题，可能是因为它太旧，没有实际使用Javascript或没有适合特定的情况。。

阅读 400

2020-05-10

共1个答案

小编典典

-更新-

Document.execCommand（）

[1]在Firefox 41之前，需要在user.js首选项文件中启用剪贴板功能。
有关更多信息，请参见Mozilla首选项简要指南。如果不支持或启用该命令，则execCommand引发一个异常而不是返回false。在Firefox41及更高版本中，默认情况下，任何能够弹出窗口的事件处理程序均启用剪贴板功能（半信任脚本））。

从Firefox 41版开始，现在可以使用。因此，不再需要使用备用广告。

由于浏览器在访问剪贴板方面的行为似乎有所不同，因此我花了一些时间才得以解决。

它与您的解决方案非常相似，但是区别在于创建一个临时元素并用input填充它value。这样，我们可以将输入的display属性设置为none。

对于使用的 IE ，也有一种解决方法window.clipboardData。

Firefox 根本不允许我访问剪贴板。因此，我必须添加一个prompt以让用户手动复制输入值。当然a
prompt很难看，但是您可以只使用窗口之类的模态，这样做也一样。

由于这似乎是一个棘手的事情，所以我在 Win7（64位）上 进行了测试

Chrome-版本43.0.2357.134 m

IE-版本11.0.9600.17914

~~和Firefox无关，因为无论如何我都不会允许它访问。~~

var copyBtn   = $("#copy-btn"),

    input     = $("#copy-me");



function copyToClipboardFF(text) {

  window.prompt ("Copy to clipboard: Ctrl C, Enter", text);

}



function copyToClipboard() {

  var success   = true,

      range     = document.createRange(),

      selection;



  // For IE.

  if (window.clipboardData) {

    window.clipboardData.setData("Text", input.val());

  } else {

    // Create a temporary element off screen.

    var tmpElem = $('<div>');

    tmpElem.css({

      position: "absolute",

      left:     "-1000px",

      top:      "-1000px",

    });

    // Add the input value to the temp element.

    tmpElem.text(input.val());

    $("body").append(tmpElem);

    // Select temp element.

    range.selectNodeContents(tmpElem.get(0));

    selection = window.getSelection ();

    selection.removeAllRanges ();

    selection.addRange (range);

    // Lets copy.

    try {

      success = document.execCommand ("copy", false, null);

    }

    catch (e) {

      copyToClipboardFF(input.val());

    }

    if (success) {

      alert ("The text is on the clipboard, try to paste it!");

      // remove temp element.

      tmpElem.remove();

    }

  }

}



copyBtn.on('click', copyToClipboard);


#copy-me {

    display:none

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="Element To Be Copied" id="copy-me" value="foo loves bar"/>

<button id="copy-btn">Copy</button><br/><br/>

<textarea placeholder="paste here"></textarea>

2020-05-10