如何用jQuery实现多个输入框对应独立复制按钮的剪贴板功能

你原有代码的核心问题是选择器命中了所有输入框，没有定位到当前点击按钮对应的输入框，同时jQuery对象无法直接调用原生select()方法，需要转换为DOM对象。

正确可运行代码 #

$('.field').on('click', '.copy', function () {
    // 定位当前复制按钮对应组的输入框，转原生DOM对象
    const targetInput = $(this).closest('.field').find('input')[0];
    // 选中内容+执行复制
    targetInput.select();
    document.execCommand('copy');
    // 可选：添加复制成功反馈
    // $(this).text('已复制').delay(1000).text('Copy!');
});

实现逻辑说明 #

• 事件委托本身已经支持所有.copy按钮的点击监听，不需要额外遍历each处理，也天然兼容后续动态新增的输入组
• $(this)指向当前被点击的复制按钮
• closest('.field')向上查找当前按钮所属的输入组容器，避免命中其他组的元素
• find('input')定位当前组内的输入框，加[0]是将jQuery对象转换为原生DOM对象，才能调用原生的select()选中方法

如果需要适配最新浏览器标准，也可以替换为更现代的Clipboard API实现：

$('.field').on('click', '.copy', function () {
    const targetInput = $(this).closest('.field').find('input')[0];
    navigator.clipboard.writeText(targetInput.value).then(() => {
        // 复制成功逻辑
        // $(this).text('已复制').delay(1000).text('Copy!');
    });
});

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