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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试不使用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或没有适合特定的情况。。

回答：

-更新-

[1]在Firefox 41之前，需要在user.js首选项文件中启用剪贴板功能。

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

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

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

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

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

根本不允许我访问剪贴板。因此，我必须添加一个prompt以让用户手动复制输入值。当然a

prompt很难看，但是您可以只使用窗口之类的模态，这样做也一样。

由于这似乎是一个棘手的事情，所以我在 进行了测试

和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>

以上是 使用execCommand（Javascript）将隐藏的文本复制到剪贴板 的全部内容， 来源链接： utcz.com/qa/405338.html

回到顶部