JavaScript实现点击按钮复制按钮内文本（密码生成器场景）

我正在开发一款密码生成器，设有密码生成按钮以及两个初始无文本的按钮，生成的密码会填充至这两个空按钮中。我希望实现点击这两个按钮时，复制其内部的文本内容，我是JavaScript新手，请问该如何实现？现有代码如下：

现有JS代码 #

function copy() {
  // Get the text field
  var copyText1 = document.getElementById("randomOne").innerText;
  var copyText2 = document.getElementById("randomTwo").innerText;

  // Select the text field
  copyText1.select();
  copyText2.select();

  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText1);
  navigator.clipboard.writeText(copyText2);
}

现有HTML代码 #

<div class="container">
  <h1>Generate a <br> <span>random password</span></h1>
  <p>Never use an insecure password again.</p>

  <button class="generateBtn" onclick="Generate()">Generate passwords</button>
  <label> Enter Password Length </label>
  <input type="number" min="1" max="100" value="length" id="passwordLength">
  <hr>
  <button id="randomOne" onclick="copy()"></button>
  <button id="randomTwo" onclick="copy()"></button>
  <p id="sms">(click/tap the passward you want to copy on your clip board.)</p>
</div>

你的现有代码存在两个核心问题：一是字符串没有select()方法，调用会直接报错；二是不管点击哪个按钮，都会同时处理两个按钮的文本，最后只会复制第二个的内容，不符合需求。下面是修改后的实现：

1. 修改HTML代码 #

把按钮的onclick事件改成传递当前按钮元素this，这样函数能明确知道你点击的是哪个按钮：

<div class="container">
  <h1>Generate a <br> <span>random password</span></h1>
  <p>Never use an insecure password again.</p>

  <button class="generateBtn" onclick="Generate()">Generate passwords</button>
  <label> Enter Password Length </label>
  <input type="number" min="1" max="100" value="length" id="passwordLength">
  <hr>
  <button id="randomOne" onclick="copy(this)"></button>
  <button id="randomTwo" onclick="copy(this)"></button>
  <p id="sms">(click/tap the password you want to copy to your clipboard.)</p>
</div>

2. 修改JavaScript代码 #

重新编写copy函数，接收点击的按钮元素，只复制该按钮的文本，同时增加错误处理和用户提示：

function copy(btn) {
  // 获取当前点击按钮的文本内容
  const passwordText = btn.innerText;

  // 先检查是否有密码可复制
  if (!passwordText.trim()) {
    alert('请先生成密码再复制！');
    return;
  }

  // 复制到剪贴板
  navigator.clipboard.writeText(passwordText)
    .then(() => {
      alert('密码已成功复制到剪贴板');
    })
    .catch(error => {
      console.log('复制失败:', error);
      alert('复制失败，请检查浏览器权限或重试');
    });
}

关键说明 #

• navigator.clipboard需要在HTTPS环境或者本地localhost下才能正常使用，直接打开本地HTML文件（file://协议）可能会触发权限错误
• 增加空文本判断，避免用户还没生成密码就点击复制的无效操作
• 用then和catch处理剪贴板操作的成功和失败，给用户明确的反馈

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