如何为复制到剪贴板功能实现多选择器或多ID支持

嘿，我明白你想让这个复制功能同时支持多个元素的需求，这其实很容易实现，我给你两种实用的改造方案，还有更现代的API替代方案，一起来看看吧！

方案1：通过CSS选择器批量绑定（最灵活推荐） #

这个方案利用document.querySelectorAll()支持标准CSS选择器的特性，不管你是用class、ID、属性选择器，甚至同时指定多个选择器，都能轻松批量绑定复制功能。

改造后的完整代码如下：

(function() {
  "use strict";

  // 核心复制逻辑：处理单个元素
  function copyToClipboard(elem) {
    var target = elem;
    var currentFocus = document.activeElement;
    
    // 安全校验：确保是可输入元素（input/textarea）
    if (!target || !('value' in target)) return false;

    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    var succeed;
    try {
      succeed = document.execCommand("copy");
    } catch (e) {
      console.warn(e);
      succeed = false;
    }
    
    // 恢复原来的焦点，提升用户体验
    if (currentFocus && typeof currentFocus.focus === 'function') {
      currentFocus.focus();
    }
    
    return succeed;
  }

  // 批量绑定函数：传入任意CSS选择器，自动给所有匹配元素加复制事件
  function bindCopyToClipboard(selector) {
    var elements = document.querySelectorAll(selector);
    elements.forEach(function(elem) {
      elem.addEventListener('click', function() {
        var success = copyToClipboard(this);
        // 可选：添加复制成功的UI提示
        if (success) {
          console.log('内容已复制到剪贴板');
          // 示例：临时修改元素文本提示用户，1.5秒后恢复
          var originalText = this.getAttribute('data-copy-text') || this.value;
          this.setAttribute('data-copy-text', originalText);
          this.value = '已复制！';
          setTimeout(() => {
            this.value = originalText;
          }, 1500);
        } else {
          console.log('复制失败，请手动复制');
        }
      });
    });
  }

  // 使用示例：
  // 1. 绑定所有class为copyable的元素
  bindCopyToClipboard('.copyable');
  // 2. 同时绑定多个ID和class（用逗号分隔选择器）
  bindCopyToClipboard('#copy-btn1, #copy-textarea2, .another-copy-group');
})();

使用的时候，你只需要给需要添加复制功能的元素加上对应的class或者ID，然后调用bindCopyToClipboard()传入选择器就行，非常灵活。

方案2：直接传入多个ID的数组 #

如果你更习惯直接指定元素ID，可以用这个方案，传入一个ID数组，函数会自动找到每个元素并绑定复制事件：

(function() {
  "use strict";

  // 核心复制逻辑和方案1一致
  function copyToClipboard(elem) {
    var target = elem;
    var currentFocus = document.activeElement;
    
    if (!target || !('value' in target)) return false;

    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    var succeed;
    try {
      succeed = document.execCommand("copy");
    } catch (e) {
      console.warn(e);
      succeed = false;
    }
    
    if (currentFocus && typeof currentFocus.focus === 'function') {
      currentFocus.focus();
    }
    
    return succeed;
  }

  // 接受ID数组的批量绑定函数
  function bindCopyByIds(idArray) {
    idArray.forEach(function(id) {
      var elem = document.getElementById(id);
      if (elem) {
        elem.addEventListener('click', function() {
          var success = copyToClipboard(this);
          // 同样可以添加提示逻辑
          success ? console.log('复制成功') : console.log('复制失败');
        });
      } else {
        console.warn('未找到ID为「' + id + '」的元素');
      }
    });
  }

  // 使用示例：传入多个元素ID
  bindCopyByIds(['copy-input-1', 'user-textarea', 'copy-button-2']);
})();

额外推荐：使用现代Clipboard API替代execCommand #

你原来的代码里用的document.execCommand("copy")其实已经被浏览器标记为废弃API了，虽然目前大部分浏览器还兼容，但更推荐使用标准的Clipboard API，它的逻辑更简洁，不需要处理焦点和文本选中的问题：

(function() {
  "use strict";

  // 现代版复制函数：直接复制文本内容
  async function copyToClipboard(text) {
    try {
      await navigator.clipboard.writeText(text);
      console.log('内容已成功复制到剪贴板');
      return true;
    } catch (err) {
      console.error('复制失败:', err);
      return false;
    }
  }

  // 批量绑定函数：支持任意选择器
  function bindCopyToClipboard(selector) {
    document.querySelectorAll(selector).forEach(elem => {
      elem.addEventListener('click', async function() {
        // 获取元素的文本内容：input/textarea取value，其他元素取textContent
        var copyText = this.value || this.textContent.trim();
        var success = await copyToClipboard(copyText);
        // 这里可以加UI提示逻辑，比如弹出提示框
      });
    });
  }

  // 使用示例：绑定所有带data-copy属性的元素
  bindCopyToClipboard('[data-copy]');
})();

这个API的兼容性也很好，现在主流浏览器（Chrome、Firefox、Edge、Safari 13.1+）都支持，而且代码更简洁易维护。

总结一下，不管用哪种方案，核心思路都是批量获取目标元素，给每个元素绑定触发事件，然后调用复制逻辑，你可以根据自己的需求选择最合适的方案。

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