将不同输入框的 onclick 值复制到剪贴板的函数实现

本文介绍如何通过 JavaScript 实现点击按钮将特定文本复制到剪贴板的功能。该方案通过隐藏的 input 元素存储文本，并通过按钮的 onclick 事件触发复制函数，实现灵活的文本复制功能，适用于需要大量按钮复制不同文本的场景。文章将提供完整的代码示例和详细的步骤说明。

实现原理

核心思想是利用 HTML 的 input 元素存储需要复制的文本，并使用 JavaScript 的 navigator.clipboard.writeText() 方法将文本写入剪贴板。通过按钮的 onclick 事件触发 JavaScript 函数，该函数获取指定 input 元素的值，并将其复制到剪贴板。

具体步骤

1. 创建隐藏的 input 元素：

   首先，创建多个 input 元素，并将它们设置为隐藏。每个 input 元素的值设置为需要复制的文本，并赋予唯一的 id。

   将 div 设置为 hidden 可以确保这些 input 元素不会在页面上显示。

2. 创建按钮：

   

   uBrand

   一站式AI品牌创建平台，在线品牌设计，AI品牌策划，智能品牌营销；uBrand帮助创业者轻松打造个性品牌！

   下载

   创建按钮，并为每个按钮添加 onclick 事件。onclick 事件调用 JavaScript 函数，并将对应 input 元素的 id 作为参数传递给该函数。

   Click me for text
   Click me for text
   Click me for text

3. 编写 JavaScript 函数：

   编写 JavaScript 函数 myFunction(id)。该函数接收 input 元素的 id 作为参数，获取该 input 元素的值，并使用 navigator.clipboard.writeText() 方法将其复制到剪贴板。

   function myFunction(id) {
     var copyText = document.getElementById(id);
     copyText.select(); // 选中input中的文本
     navigator.clipboard.writeText(copyText.value);
   }

   代码解释:

   • document.getElementById(id): 根据传入的 id 获取对应的 input 元素。
   • copyText.select(): 选中 input 元素中的文本，这是 navigator.clipboard.writeText() 方法正常工作所必需的步骤。
   • navigator.clipboard.writeText(copyText.value): 将 input 元素的值（即需要复制的文本）写入剪贴板。

完整代码示例

  





Click me for text 1
Click me for text 2
Click me for text 3

注意事项

• 权限问题： navigator.clipboard.writeText() 方法需要用户的授权才能访问剪贴板。在某些浏览器或环境下，可能需要用户手动允许该网站访问剪贴板。如果遇到权限问题，可以在控制台中查看错误信息，并根据提示进行处理。
• 兼容性： navigator.clipboard API 在一些旧版本的浏览器中可能不受支持。建议在使用前进行兼容性检查。
• 用户体验： 复制成功后，可以考虑添加一些视觉反馈，例如弹出一个提示框，告知用户文本已成功复制到剪贴板。

总结

通过以上步骤，我们可以实现一个灵活的文本复制功能，允许用户通过点击按钮将不同的文本复制到剪贴板。该方案适用于需要大量按钮复制不同文本的场景，例如代码片段、配置信息等。通过隐藏的 input 元素存储文本，可以方便地管理和更新需要复制的内容。