Question

我想制作＆＃34; COPY ADDRESS＆＃34;按钮复制我指定的文本。我已经尝试过自己做，但无法做到。这很简单，我的知识很少。

＆＃13;

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

＆＃13;

Answer 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();
}

<button onclick="copy('abc')">Copy</button>

它是如何工作的？

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

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

制作按钮复制文本

1 个答案:

它是如何工作的？