如何利用动态创建的hidden input临时存储密码并实现剪贴板复制？

嘿，我懂你遇到的麻烦了——你注释掉el1.setAttribute('type','hidden')是对的，因为浏览器不允许选中隐藏类型（hidden）输入框的内容，select()方法在这种元素上根本无效，自然没法完成复制操作。

下面给你两种可行的解决方案，既能隐藏临时存储的密码，又能顺利复制到剪贴板：

方案1：用可见输入框但通过CSS隐藏 #

不用hidden类型，还是用text类型的input，然后通过CSS把它移出可视区域，这样它既不会显示在页面上，又能被正常选中复制。

修改你的copyToClipboard2函数如下：

const copyToClipboard2 = str => {
  const el1 = document.createElement('input');
  el1.setAttribute('type','text');
  // 用CSS隐藏元素，同时保证能被选中
  el1.style.position = 'absolute';
  el1.style.left = '-9999px';
  el1.value = str;
  document.body.appendChild(el1);
  el1.select();
  // 处理可能的复制失败情况
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
    return false;
  }
  document.body.removeChild(el1);
  return true;
};

方案2：使用现代Clipboard API（更推荐） #

现在浏览器普遍支持navigator.clipboard API，不需要创建任何DOM元素就能直接复制文本，代码更简洁，也避免了DOM操作的麻烦。

修改你的复制函数为：

const copyToClipboard2 = async str => {
  try {
    await navigator.clipboard.writeText(str);
    return true;
  } catch (err) {
    console.error('复制失败:', err);
    // 如果API不支持，降级到方案1的方法
    const el1 = document.createElement('input');
    el1.setAttribute('type','text');
    el1.style.position = 'absolute';
    el1.style.left = '-9999px';
    el1.value = str;
    document.body.appendChild(el1);
    el1.select();
    document.execCommand('copy');
    document.body.removeChild(el1);
    return true;
  }
};

注意：这个API需要在HTTPS环境或localhost下使用，部分浏览器可能会要求用户授权剪贴板访问权限，不过对于密码生成这种场景完全适用。

完整的修改后代码 #

把方案1或方案2的复制函数替换到你的原代码中，完整代码示例（以方案2为例）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
</head> 
<body> 
  <button type="button" onclick="generatePassword()">Generate Password</button> 
  <script type="application/x-javascript"> 
    function generatePassword() { 
      var length = 15, 
          charset3 = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()!+=~", 
          retVal = ""; 
      for (var i = 0, n = charset3.length; i < length; ++i) { 
        retVal += charset3.charAt(Math.floor(Math.random() * n)); 
      } 
      copyToClipboard2(retVal); 
      alert('Password ready to be pasted');
    } 

    const copyToClipboard2 = async str => {
      try {
        await navigator.clipboard.writeText(str);
        console.log('密码已复制到剪贴板');
      } catch (err) {
        console.error('Clipboard API不可用，使用降级方案:', err);
        const el1 = document.createElement('input');
        el1.setAttribute('type','text');
        el1.style.position = 'absolute';
        el1.style.left = '-9999px';
        el1.value = str;
        document.body.appendChild(el1);
        el1.select();
        document.execCommand('copy');
        document.body.removeChild(el1);
      }
    };
  </script> 
</body> 
</html>

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