通过图标复制到剪贴板答案

【问题标题】：Copy to clipboard via icon通过图标复制到剪贴板
【发布时间】：2018-09-15 14:10:06
【问题描述】：

我正在使用 w3schools 的脚本在单击时将文本复制到剪贴板，但该脚本仅在存在文本字段时才有效。我试图只显示一个没有文本字段的图标，因此当用户单击图标时，编码文本会自动复制到剪贴板。

他们的脚本位于：https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

我正在使用 display:none;隐藏输入字段。尽管就 JS 而言一切似乎都可以正常工作，但它并没有复制文本。

有没有办法（可能通过其他方法或脚本）让我只显示用于复制文本的图标而不是字段 + 图标/链接？

【问题讨论】：

标签： javascript html copy icons clipboard

【解决方案1】：

有一种方法可以复制隐藏的输入，但不使用display:none，您可以使用position:absolute;left:-1000px 之类的方式将输入发送到视线之外的位置，例如：

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}

#myInput{position:absolute;left:-1000px}

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

【讨论】：

我认为这是最简单的解决方案，谢谢！老实说，我什至没有想过这样做！有时最简单的解决方案是最后想到的。 :)

【解决方案2】：

这里：

            var copyTextareaBtn = document.querySelector('.btn4');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.block2');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

【讨论】：

【解决方案3】：

好吧，我不知道我是否理解你的问题，但我假设你想复制一些文本而不在你的 html 页面中显示文本，使用该脚本你只是从文本输入的 id 中获取元素被按下。如果你隐藏它，你将无法访问它。如果你只是想在按下底部时复制一些隐藏的文本，你应该把你的文本放在你的 javascript 文件中，而不是放在你的 htlm 页面中:)

希望我的回答对你有所帮助！

【讨论】：

这可行，但不适用于我的情况。脚本本身需要是全局的。为每个案例（或事件）选择的文本由当前页面设置，并且可以从一个到下一个不同。不过谢谢！

【解决方案4】：

function copyToClipboard(text){
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

【讨论】：

请提供除原始代码之外的一些解释，以获得更好的整体答案。