解决按钮复制textarea仅生效第一个的问题，实现多文本域内容复制

你的代码问题出在固定选取了第一个class为form-control的元素：var copyText = document.getElementsByClassName("form-control")[0];，所以无论点击哪个按钮，都会复制第一个textarea的内容。下面提供两种修改方案：

方案一：通过按钮传参关联对应textarea #

直接给每个按钮的点击事件传递当前按钮对象，通过DOM关系找到对应的textarea：

修改后的JavaScript代码 #

function myFunction(btn) {
    // 获取当前按钮的前一个兄弟元素（即对应的textarea）
    const copyText = btn.previousElementSibling;
    // 选中文本域内容
    copyText.select();
    copyText.setSelectionRange(0, 99999); // 适配移动端文本选择
    // 执行复制操作
    document.execCommand("copy");
    // 提示复制结果
    alert("Copied the text: " + copyText.value);
}

修改后的HTML代码 #

<textarea class="form-control" tabindex="0">something</textarea>
<button onclick="myFunction(this)">clickme</button>
<textarea class="form-control" tabindex="3">something1</textarea>
<button onclick="myFunction(this)">clickme</button>
<textarea class="form-control">something2</textarea>
<button onclick="myFunction(this)">clickme</button>

方案二：使用事件委托（更优雅的写法） #

不给每个按钮单独绑定点击事件，而是给父容器添加事件监听，通过事件冒泡判断点击的是按钮，再关联对应的textarea：

修改后的HTML代码 #

<div class="copy-group">
    <textarea class="form-control" tabindex="0">something</textarea>
    <button>clickme</button>
    <textarea class="form-control" tabindex="3">something1</textarea>
    <button>clickme</button>
    <textarea class="form-control">something2</textarea>
    <button>clickme</button>
</div>

修改后的JavaScript代码 #

// 给父容器绑定点击事件
document.querySelector('.copy-group').addEventListener('click', function(e) {
    // 判断点击的元素是按钮
    if (e.target.tagName === 'BUTTON') {
        const copyText = e.target.previousElementSibling;
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        document.execCommand("copy");
        alert("Copied the text: " + copyText.value);
    }
});

两种方案都能实现点击对应按钮复制其前面textarea的内容，方案二更适合后续扩展（比如新增textarea和按钮时无需修改JS代码）。

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