将不同输入框的 onclick 值复制到剪贴板的函数实现-js教程-PHP中文网

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

霞舞

发布： 2025-09-23 20:49:01

原创

627人浏览过

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

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

实现原理

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

具体步骤

创建隐藏的 input 元素：

首先，创建多个 input 元素，并将它们设置为隐藏。每个 input 元素的值设置为需要复制的文本，并赋予唯一的 id。
```
<div hidden>
    <input type="text" value="Text for Button 1" id="button1">
    <input type="text" value="Different Text for Button 2" id="button2">
    <input type="text" value="Different Text for each Button" id="button3">
</div>
```
登录后复制
将 div 设置为 hidden 可以确保这些 input 元素不会在页面上显示。
创建按钮：

腾讯智影-AI数字人
基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

创建按钮，并为每个按钮添加 onclick 事件。onclick 事件调用 JavaScript 函数，并将对应 input 元素的 id 作为参数传递给该函数。
```
<button onclick="myFunction('button1')">Click me for text</button>
<button onclick="myFunction('button2')">Click me for text</button>
<button onclick="myFunction('button3')">Click me for text</button>
```
登录后复制
编写 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 元素的值（即需要复制的文本）写入剪贴板。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Copy Text to Clipboard</title>
</head>
<body>

<div hidden>
  <input type="text" value="Text for Button 1" id="button1">
  <input type="text" value="Different Text for Button 2" id="button2">
  <input type="text" value="Different Text for each Button" id="button3">
</div>

<button onclick="myFunction('button1')">Click me for text 1</button>
<button onclick="myFunction('button2')">Click me for text 2</button>
<button onclick="myFunction('button3')">Click me for text 3</button>

<script>
function myFunction(id) {
  var copyText = document.getElementById(id);
  copyText.select();
  navigator.clipboard.writeText(copyText.value);
}
</script>

</body>
</html>

登录后复制

注意事项

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