如何实现无可见文本框的复制功能？寻求仅按钮方案

嘿，我懂你的困扰——用display:none隐藏文本框会让复制失效，因为浏览器不会允许选中完全不可见的元素。下面给你两种靠谱的解决方案，选适合你的就行：

方案1：隐藏文本框但保持可选中状态 #

不用display:none，改用其他视觉隐藏但元素仍存在于DOM中的样式，这样文本框依然能被选中复制。比如用绝对定位把它移出视口，或者设置宽高为0并隐藏可见性：

代码示例： #

<script>
function copyfunction() {
  var copyText = document.getElementById("copydata");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>
<!-- 用视觉隐藏样式替代display:none -->
<input type="text" value="I will be copied" id="copydata" style="position: absolute; left: -9999px; top: -9999px;">
<button class="button copy" onclick="copyfunction()">Copy</button>

这种方法的好处是不用改太多原有代码，只是调整文本框的样式就能实现隐藏且不影响复制。

方案2：完全不需要文本框，用现代Clipboard API #

document.execCommand("copy")其实已经被废弃了，现在推荐使用更稳定的navigator.clipboard API，完全不需要额外的文本元素，直接在按钮里处理复制逻辑：

代码示例（基础版）： #

<script>
async function copyfunction() {
  const textToCopy = "I will be copied";
  try {
    await navigator.clipboard.writeText(textToCopy);
    alert("Copied the text: " + textToCopy);
  } catch (err) {
    console.error('Failed to copy: ', err);
    alert("Oops, failed to copy text!");
  }
}
</script>
<button class="button copy" onclick="copyfunction()">Copy</button>

更灵活的版本（把文本存在按钮的data属性里）： #

如果需要多个复制按钮对应不同文本，可以把文本存在按钮的data-text属性中，这样函数可以复用：

<script>
async function copyfunction(e) {
  const textToCopy = e.target.dataset.text;
  try {
    await navigator.clipboard.writeText(textToCopy);
    alert("Copied the text: " + textToCopy);
  } catch (err) {
    console.error('Failed to copy: ', err);
    alert("Oops, failed to copy text!");
  }
}
</script>
<button class="button copy" onclick="copyfunction(event)" data-text="I will be copied">Copy</button>
<button class="button copy" onclick="copyfunction(event)" data-text="Another text to copy">Copy Another</button>

这个方案更简洁，也符合现代网页标准，推荐优先使用。

内容的提问来源于stack exchange，提问作者learningtoanimate