- 更新 -

Question

我试图在不使用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"两者都没有成功。两者都导致按钮选择整个页面并将整个内容复制到用户的剪贴板我相对确信原因不是基于浏览器，而只是因为我在Mac OS X 10.10.4上测试Chrome（版本43.0.2357.134（64位））。

有没有办法可以保持＆lt;＆lt;输入＆GT;在隐藏它的同时可见？或者如果不是我可以采取的替代路线？

我知道类似的问题，其中没有一个问题可以解决我的问题，无论是因为太老，不是实际使用Javascript或不符合特定情况。 Here's a good answer适用于任何有类似，不太具体问题的人。

Answer 1

这是我的解决方案，不使用jQuery：

function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}

<!DOCTYPE html>
<html>
<head>
<title>Set Clipboard</title>
</head>
<body>
    <button onclick="setClipboard('foo loves bar')">Set Clipboard</button>
</body>
</html>

Answer 2

- 更新 -

Document.execCommand()

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

由于Firefox version 41 Document.execCommand（）现在可以正常工作。所以不再需要使用后备。

由于浏览器在剪贴板访问时的行为似乎有所不同，我花了一段时间才解决它。

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

IE 还有一种使用window.clipboardData的解决方法。

Firefox 根本不允许我访问剪贴板。所以我不得不添加一个prompt来让用户手动复制输入值。当然prompt是丑陋的，但你可以使用类似窗口的模态，也可以这样做。

由于这似乎是一个棘手的事情，我在 Win7（64位）并在

进行测试

Chrome - 版本43.0.2357.134 m

IE - 版本11.0.9600.17914

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

＆＃13;

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

＆＃13;

#copy-me {
    display:none
}

＆＃13;

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

＆＃13;

Answer 3

感谢@DavidDomain的帮助，我找到了一种有点hacky但功能性的方法。

首先，我将输入方式移出屏幕并修改了一些属性，结果如下：

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo" style="display:none; position: relative; left: -10000px;"/>

显示：在对js

进行以下修改后未添加任何内容

之后，来自@Pokkanome的评论让我像这样修改onClick函数：

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

我不确定是否可以使用这种方法从隐藏的div复制，这在浏览器安全性方面是有意义的，因为提供对剪贴板的无疑访问会有些风险。所采取的方法虽然具有相同的预期结果。

Answer 4

在所有浏览器中都可以使用的替代解决方法是，您可以将元素的不透明度设置为0（具有绝对位置），而不是隐藏元素。

#copy-me {
    position: absolute;
    opacity: 0;
}

Answer 5

您可以简单地使用opacity：0.00000000000001隐藏输入标签，然后使用javascript将隐藏的文本复制到剪贴板

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Text copied successfully");
}

<input type="text" value="===your text here===" id="myInput" style="opacity:0.00000000000001">
<button onclick="myFunction()">Copy</button>

Answer 6

您可以使用 window.navigator：

navigator.clipboard.writeText('this will be copied to the clipboard');

Answer 7

对我有用的是：

<div>
  <a class="copyBtn">Copy</a>
  <input class="d-none" value="teste">
</div>

和：

$('.copyBtn').on('click', function(e) {
  e.preventDefault();
  var input = $(this).parent().find(".dirVal");
  $(input).removeClass("d-none");
  input.select();

  document.execCommand('copy');
  $(input).addClass("d-none");
  callNotify("Parabéns!", "Caminho copiado para área de transferência!", "success");
});

Answer 8

这个问题很老，所以我有一个新的过时的答案。

使用此脚本可以复制您的数据。它比过去的要小得多

它所做的就是将输入WAYYY隐藏在屏幕的侧面，从而使其隐藏。仍然保持复制它的能力（与使用Display时不同：无；）

function copyFunc() {
  var copyText = document.getElementById("copyInp");
  copyText.select();
  document.execCommand("copy"); //this function copies the text of the input with ID "copyInp"
}

<input type="text" value="StuffYaWantCopied" id="copyInp" style="position:absolute;left:-1000px;top:-1000px;">
  <a onclick="copyFunc()" style="cursor:cell;">
     Click here to Copy!
  </a>

Answer 9

2019年-仍在寻找没有屏幕外内容的答案。

我要做的是首先将输入文本字段更改为type =“ text”，复制文本，然后将其更改回type =“ hidden”。效果很好。

<input id="dummy" name="dummy" type="hidden">

<script>
var copyText = document.getElementById("dummy");
copyText.type = 'text';
copyText.select();
document.execCommand("copy");
copyText.type = 'hidden';
</script>

Answer 10

该如何使用：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

navigator.clipboard.writeText("<empty clipboard>").then(function() {
  /* clipboard successfully set */
}, function() {
  /* clipboard write failed */
});

Answer 11

随便吧！

.blind {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

<textarea id="copy" class="blind">
your copy text here!
</textarea>

copyClipboard(document.getElementById('copy'));

function copyClipboard(el) {
  el.select();
  window.document.execCommand('copy');
}

https://gist.github.com/seunggabi/7ae53c100d647cb19c48047cff9b7019

Answer 12

两种对我有用的方法：

方法1：在这种方法中，输入元素最初是隐藏的，然后复制功能将其取消隐藏，选择并复制文本，然后再次将其隐藏。

<script>
  function copyLinkToClipboardViaHiddenField() {
    el = document.querySelector("#input");
    el.style.display = "block";
    var copyText = document.querySelector("#input");
    copyText.select();
    document.execCommand("copy");
    el.style.display = "none";
    document.getElementById("copylink").innerText = "copied OK!";
    document.getElementById("copylink").href = "";
    document.getElementById("copylink").style.color = "black";
    document.getElementById("copylink").style.textDecoration = "none";
    return false; // prevents click doing anything
  }

</script>
<input id="input"
       type="text"
       style="display: none;"
       value="https://www.example.org/ViaHiddenField"/>
<a href="javascript:void(0)"
   onclick="return copyLinkToClipboardViaHiddenField()"
   id="copylink"
   style="text-decoration: underline;color: blue;">copy link ViaHiddenField</a>

方法2：通过这种方法，将创建一个新的input元素并将其附加到文档主体的底部，将其值复制，然后将该元素删除。

<script>
  function copyLinkToClipboardViaAppendElement() {
    el = document.createElement("input");
    el.setAttribute('type', 'text');
    el.setAttribute('value', "https://www.example.org/ViaAppendElement");
    document.body.appendChild(el)
    el.select();
    console.log(el)
    document.execCommand("copy");
    el.parentNode.removeChild(el);
    document.getElementById("copylink").innerText = "copied OK!";
    document.getElementById("copylink").href = "";
    document.getElementById("copylink").style.color = "black";
    document.getElementById("copylink").style.textDecoration = "none";
    return false; // prevents click doing anything;
  }

</script>
<a href="javascript:void(0)"
   onclick="return copyLinkToClipboardViaAppendElement()"
   id="copylink"
   style="text-decoration: underline;color: blue;">copy link ViaAppendElement</a>

Answer 13

要将文本复制到clibboard，必须可见。因此，我创建了一个输入type = text，但设置了样式display：none，并使用jquery在复制周围执行show（）和hide（）。

<input type=text id='me' value='bla' style='display:none;'>
<button onclick='
$("#me").show(); 
var copyText = document.getElementById("me"); 
copyText.select();
copyText.setSelectionRange(0, 99999);   
document.execCommand("copy"); 
$("#me").hide(); 
alert("Link copied to clipboard");
'></button>

Answer 14

这对我来说似乎很容易，虽然很容易回答这个问题。而不是使用display: none;使用此：

＆＃13;

height: 0px;
width: 0px;
overflow: hidden;
position: absolute;

＆＃13;

这允许选择，同时仍然隐藏textarea而不影响设计。

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

14 个答案:

- 更新 -