实现点击不同按钮复制对应Input值至剪贴板的功能咨询

你这套通过隐藏input存储文本、点击按钮复制的核心逻辑是能正常工作的，但如果要适配大量按钮，原代码逐个写onclick的方式会比较繁琐，下面给你几个优化方向：

原代码的可行性验证 #

你的代码本身没问题：点击按钮时通过ID获取隐藏input，读取其值并复制到剪贴板，完全能实现需求。但按钮数量多了之后，重复写onclick="myFunction('xxx')"会增加维护成本。

优化方案1：用数据属性+事件委托（无需隐藏input） #

直接把要复制的文本存在按钮的data-*属性里，通过事件委托绑定一次点击事件，不用额外的隐藏元素，DOM结构更简洁：

<button data-copy="Text for Button 1">Click me for text</button>
<button data-copy="Different Text for Button 2">Click me for text</button>
<button data-copy="Different Text for each Button">Click me for text</button>

<script>
// 把事件绑定到父容器（比如body，或者专门的按钮容器）
document.body.addEventListener('click', function(e) {
  // 判断点击的是带复制属性的按钮
  if (e.target.hasAttribute('data-copy')) {
    const textToCopy = e.target.getAttribute('data-copy');
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        // 给用户个复制成功的反馈
        const originalText = e.target.textContent;
        e.target.textContent = 'Copied!';
        setTimeout(() => e.target.textContent = originalText, 1500);
      })
      .catch(err => console.log('复制失败:', err));
  }
});
</script>

优化方案2：保留隐藏input的简化版 #

如果必须用隐藏input存文本（比如文本是动态生成的，或者需要从input读取），可以用数据属性关联input的ID，同样用事件委托减少重复代码：

<div style="display: none;">
  <input type="text" value="Text for Button 1" id="btn1-text">
  <input type="text" value="Different Text for Button 2" id="btn2-text">
  <input type="text" value="Different Text for each Button" id="btn3-text">
</div>

<button data-target="btn1-text">Click me for text</button>
<button data-target="btn2-text">Click me for text</button>
<button data-target="btn3-text">Click me for text</button>

<script>
document.body.addEventListener('click', function(e) {
  const targetId = e.target.getAttribute('data-target');
  if (!targetId) return;
  
  const copyInput = document.getElementById(targetId);
  if (!copyInput) return;
  
  navigator.clipboard.writeText(copyInput.value)
    .then(() => {
      const originalText = e.target.textContent;
      e.target.textContent = 'Copied!';
      setTimeout(() => e.target.textContent = originalText, 1500);
    })
    .catch(err => console.log('复制失败:', err));
});
</script>

注意点 #

• navigator.clipboard只能在HTTPS环境或者localhost下正常使用，HTTP环境会被浏览器阻止
• 复制操作必须由用户主动触发（比如点击按钮），不能自动执行
• 加个复制成功的提示能提升用户体验，避免用户不知道操作是否成功

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