如何使用 HTML 或 JavaScript 将特定代码块中的文本复制到剪贴板？

Question

当用户单击按钮时，我想将存储在列表项中特定代码块中的文本复制到剪贴板。 我在网上找到了各种方法，可以让您在单击某些内容时进行复制，但如果可能的话，我希望能够在页面上完成所有这些操作。

例如，我将有一个项目列表如下：

• 单击此页面。

• 键入此代码：

   <Code Sample>

我想要一个按钮来复制该特定行项目的代码。

我已经使用其他Stackoverflow 论坛中提供的解决方案成功复制了文本，但是如果我想要一个按钮单击复制文本而不是按钮中存储的文本，那将不起作用。

Answer 1

如果你可以在代码块周围放置一些带有 id 的东西，你可以这样做：

<ul>
    <li>Click this page.</li>
    <li>
        Type this code:
        <div id="code">[Code Sample]</div>
    </li>
</ul>
<button type="button">Copy</button>

document.querySelector('button').addEventListener('click', () => {
  const code = document.getElementById('code');
  navigator.clipboard.writeText(code.innerHTML);
});