如何用JavaScript实现点击复制功能 附现有HTML与JS代码

你的复制功能失效是以下几个问题导致的：

• select() 方法仅支持<input>、<textarea>这类表单输入元素，你当前存储密码的容器是普通<div>标签，直接调用select()会抛出JS错误，中断后续复制逻辑
• 你使用的document.execCommand("Copy")是已被W3C废弃的非标准接口，现代浏览器下兼容性、稳定性都无法保证
• 前置校验缺失：如果用户还没点击生成密码，密码容器是空的，复制空内容没有实际意义

推荐方案（现代浏览器标准实现，无需修改HTML） #

使用浏览器原生提供的Clipboard API实现复制，不需要改动你现有的HTML结构，直接把原来的copyOne.onclick逻辑替换为以下代码即可：

copyOne.addEventListener("click", async () => {
  const passwordContent = passwordEl.textContent.trim();
  if (!passwordContent) {
    alert("请先生成密码后再执行复制操作");
    return;
  }
  try {
    await navigator.clipboard.writeText(passwordContent);
    // 复制成功提示可根据项目需求自定义，比如改成按钮文字临时变更为"已复制"
    alert("密码复制成功");
  } catch (err) {
    console.error("复制失败：", err);
    alert("复制失败，请手动选中密码文本复制");
  }
})

兼容降级方案（适配老旧浏览器） #

如果需要兼容不支持Clipboard API的老旧版本浏览器，可以通过临时创建隐藏输入框的方式实现兼容，逻辑如下：

copyOne.addEventListener("click", () => {
  const passwordContent = passwordEl.textContent.trim();
  if (!passwordContent) {
    alert("请先生成密码后再执行复制操作");
    return;
  }
  // 创建临时输入框承载待复制内容
  const tempInput = document.createElement("input");
  tempInput.value = passwordContent;
  // 设置样式让输入框不可见、不影响页面布局
  tempInput.style.cssText = "position:fixed;opacity:0;pointer-events:none;";
  document.body.appendChild(tempInput);
  // 选中内容执行复制
  tempInput.select();
  try {
    document.execCommand("copy");
    alert("密码复制成功");
  } catch (err) {
    console.error("复制失败：", err);
    alert("复制失败，请手动选中密码文本复制");
  }
  // 操作完成后移除临时DOM节点
  document.body.removeChild(tempInput);
})

• 如果你需要给第二个密码框也加复制功能，只需要复制上述逻辑，把读取文本的元素替换为passwordTwoEl，绑定到对应复制按钮上即可
• Clipboard API 出于安全限制，仅在HTTPS协议环境、本地localhost开发环境下可正常调用，普通HTTP环境下会被浏览器拦截
• 请确认你页面上的生成密码按钮id确实为btn，否则你现有代码里获取生成按钮的逻辑会报错，导致密码生成功能失效

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