使用JavaScript实现多输入框内容复制：能否用单个函数完成？

当然可以实现，只需要把多个重复的复制函数改成通用函数+数据属性的模式，后续新增输入框时完全不需要修改JavaScript代码，只需要添加对应的输入框和按钮即可。

核心思路 #

• 用单个通用函数处理所有复制操作
• 通过按钮上的data-target属性关联对应的输入框ID
• 函数内部通过该属性找到目标输入框，读取并复制其值

修改后的完整代码 #

<html>
    <head>
        <title>Copy!</title>
        <script>
            function copyToClipboard(btn) {
                // 通过按钮的data-target属性获取对应输入框的ID
                const inputId = btn.dataset.target;
                const inputElement = document.getElementById(inputId);
                
                if (!inputElement) {
                    console.error('未找到对应的输入框');
                    return;
                }
                
                // 复制输入框的值到剪贴板
                navigator.clipboard.writeText(inputElement.value)
                    .then(() => {
                        // 可选：复制成功后的提示
                        alert('已复制到剪贴板');
                    })
                    .catch(err => {
                        console.error('复制失败:', err);
                    });
            }
        </script>
    </head>
    <body>
        <span>
            I want to be copied!<br />
            <input type="text" value="First value to be copied" id="c1"> 
            <button onclick="copyToClipboard(this)" data-target="c1">Copy the first value!</button>
        </span>
        <br /><br />
        <span>
            But I also want to be copied<br />
            <input type="text" value="And the second value" id="c2"> 
            <button onclick="copyToClipboard(this)" data-target="c2">And now the second!</button>
        </span>
        <!-- 新增输入框示例，无需修改JS -->
        <br /><br />
        <span>
            New copied item!<br />
            <input type="text" value="Third copied value" id="c3"> 
            <button onclick="copyToClipboard(this)" data-target="c3">Copy third value!</button>
        </span>
    </body>
</html>

后续新增输入框的步骤 #

1. 添加一个带唯一ID的输入框
2. 添加对应按钮，设置onclick="copyToClipboard(this)"，并给按钮加上data-target="你的输入框ID"
3. 完成，不需要修改任何JavaScript代码

额外优化（可选） #

可以去掉按钮的onclick属性，改用事件委托进一步解耦HTML和JS：

// 页面加载完成后绑定全局点击事件
document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(e) {
        // 判断点击的是带有data-copy-target属性的按钮
        if (e.target.matches('button[data-copy-target]')) {
            const inputId = e.target.dataset.copyTarget;
            const inputElement = document.getElementById(inputId);
            if (inputElement) {
                navigator.clipboard.writeText(inputElement.value)
                    .then(() => alert('已复制'))
                    .catch(err => console.error('复制失败:', err));
            }
        }
    });
});

对应的按钮只需写：<button data-copy-target="c1">Copy the first value!</button>，连onclick都不用加，代码更干净。

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