WordPress通过JavaScript添加复制文本按钮的功能

今天，有位群友问我如何给WordPress添加复制按钮，可以实现文本复制的功能。随向OpenAI提问，如何使用JavaScript实现复制按钮的功能。当然，提问是有技巧的，如果你也有某些前端或者后端的需求，可是你又不太会问，随时可以联系我。前端￥30，后端￥100，带价前来即可。

下面是整个聊天过程，以及JavaScript、HTML对应的代码

跟ChatGPT交流

古哥：
帮我用JS实现复制按钮，点击可以复制某个div
ChatGPT：
好的，您可以使用以下代码实现一个简单的复制按钮：
HTML代码
<div id="textToCopy">要复制的内容</div>
<button id="copyButton">复制</button>
JavaScript代码如下：
const copyButton = document.querySelector('#copyButton');
const textToCopy = document.querySelector('#textToCopy');

copyButton.addEventListener('click', function() {
  const range = document.createRange();
  range.selectNode(textToCopy);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
});
这段代码会在页面加载完成后寻找id为”copyButton”和”idToCopy”的元素，将点击事件添加到按钮上。点击按钮时，它将选中指定的div元素，将其内容复制到剪贴板中，并清除选区。请注意，此代码仅在现代浏览器中受支持。

如此，即可实现一个简单的复制文本功能。事实上，用户在复制后，往往需要一个反馈，才会明白已经复制成功，随再次提问

古哥：
复制后按钮变成已复制
OpenAI：
好的，您可以在复制成功后修改按钮的文本，将其变为”已复制“。以下是更新后的JavaScript代码
const copyButton = document.querySelector('#copyButton');
const textToCopy = document.querySelector('#textToCopy');

copyButton.addEventListener('click', function() {
  const range = document.createRange();
  range.selectNode(textToCopy);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();

  // 更新按钮文本
  copyButton.textContent = '已复制';
  setTimeout(() => {
    copyButton.textContent = '复制';
  }, 1000);
});
在复制成功后，它将按钮的文本更改为“已复制”，并使用setTimeout函数在1秒后将其更改回“复制”文本。您可以根据需要调整延迟时间。

完整的复制功能代码

HTML代码如下：

<div id="textToCopy">要复制的内容</div>
<button id="copyButton">复制</button>

JavaScript代码如下：

<script>
const copyButton = document.querySelector('#copyButton');
const textToCopy = document.querySelector('#textToCopy');

copyButton.addEventListener('click', function() {
  const range = document.createRange();
  range.selectNode(textToCopy);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();

  // 更新按钮文本
  copyButton.textContent = '已复制';
  setTimeout(() => {
    copyButton.textContent = '复制';
  }, 1000);
});
</script>