如何实现点击按钮复制输入框文本的功能？

针对你的HTML结构，只需添加一段JavaScript代码即可实现点击按钮复制输入框内容的功能，以下是具体实现步骤：

1. 编写JavaScript逻辑（main.js） #

将以下代码写入你的main.js文件：

document.addEventListener('DOMContentLoaded', () => {
  const copyBtn = document.querySelector('.copy-text button');
  const inputText = document.querySelector('.copy-text .text');

  copyBtn.addEventListener('click', async () => {
    try {
      // 使用现代剪贴板API复制文本
      await navigator.clipboard.writeText(inputText.value);
      // 给用户反馈复制成功
      alert('已复制到剪贴板');
      // 切换图标提示（可选）
      copyBtn.innerHTML = '<i class="fa fa-check"></i>';
      setTimeout(() => {
        copyBtn.innerHTML = '<i class="fa fa-clone"></i>';
      }, 2000);
    } catch (err) {
      // 降级处理：兼容不支持Clipboard API的旧浏览器
      console.error('现代API失败，使用降级方案:', err);
      inputText.select();
      document.execCommand('copy');
      alert('已复制到剪贴板');
    }
  });
});

2. 可选优化 #

• 确保Font Awesome图标正常显示：如果你的页面还没引入Font Awesome，需要在<head>标签中添加引入链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

• 样式优化：可以给输入框和按钮添加一些样式，比如点击按钮时的状态变化，提升交互体验。

原理说明 #

• 优先使用navigator.clipboard.writeText()：这是现代浏览器推荐的剪贴板操作API，更安全且无需选中文本。
• 降级方案：对于不支持该API的旧浏览器，使用select()选中输入框文本，再通过document.execCommand('copy')完成复制。

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