使按钮复制文本答案

【问题标题】：Making a button copy a text使按钮复制文本
【发布时间】：2018-01-08 00:27:29
【问题描述】：

我想让“复制地址”按钮复制我指定的文本。我已经尝试过自己做，但做不到。很简单，我的知识很少。

 <a class="btn btn-lg" href="#">copy address</a>

【问题讨论】：

How do I copy to the clipboard in JavaScript?的可能重复
“很简单” - 我建议，因为你知识很少，尽量不要说这样的句子。你很可能是错的。 -- 相信我，我知道。
@porcelaincoins 您想要的确切结果是什么？您希望用户将文本复制到剪贴板或某个 HTML 元素吗？无论哪种方式，我都会说 javascript 将是必须的。制作一个名为 copy 的按钮不会自行复制。如果您的知识很少，那么可以将其视为学习更多知识的机会。深入学习 w3school 教程以了解更多基本概念。

标签： javascript html

【解决方案1】：

此代码会将文本 abc 复制到剪贴板。

function copy(text) {
  document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
  document.getElementById("copy").focus();
  document.execCommand("selectAll");
  document.execCommand("copy");
  document.getElementById("copy").remove();
}

&lt;button onclick="copy('abc')"&gt;Copy&lt;/button&gt;

它是如何工作的？

首先，它创建一个 ID 为 copy 的 contenteditable div（不要在页面的其他任何地方使用此 ID）。 contenteditable 元素是设计为由用户编辑的元素，它们周围有大量的原生 JavaScript，以 document.execCommand 的形式提供，以帮助人们制作富文本编辑器。 document.execCommand 的一部分是 copy 方法，用于将文本添加到剪贴板 - 但是这只适用于 contenteditable 元素中的选定文本。
下一步是让代码聚焦 div。这就好像用户点击了它 - 输入在它们处于活动状态时被称为 focused - 例如，表单中的焦点元素将接收键盘事件
然后代码使用document.execCommand 选择contenteditable div 内的所有文本。在第一步中，我们确保此文本是传递给函数的文本。
然后，它使用document.execCommand("copy") 将该内容复制到剪贴板。这实际上非常简单。
最后，它从 DOM 中删除 div（即销毁 div）

这些动作都应该发生得如此之快，以至于用户甚至不会意识到 div 已经创建，但是文本会出现在他们的剪贴板上。

【讨论】：

函数应该去哪里？以及如何将您的按钮解决方案集成到我现有的解决方案中
@porcelaincoins 在您网页的<head> 和</head> 标签之间制作一个<script> 标签并关闭</script> 标签，然后复制并粘贴该功能。然后，只要您需要复制某些内容，只需使用<button onclick="copy('abc')">Copy</button>，将abc 替换为您要复制的内容