JavaScript实现点击复制到剪贴板功能时点击input区域失效如何解决

问题根源 #

1. 点击input内部区域时，事件触发的目标元素e.target是<input>节点，原代码的判断逻辑if (e.target.className !== 'title') return直接拦截了后续执行流程，所以复制功能不会触发
2. 原copyText函数仅读取element.innerText，不会包含<input>输入框内的value值，就算触发了也复制不到输入框里的内容
3. 原flashElement函数每次触发都会给document绑定新的transitionend事件，存在内存泄漏隐患，多次点击后会出现动画异常

修复后完整JS代码 #

var styleSheetWrapperEl = document.getElementById('topx');
styleSheetWrapperEl.addEventListener('click', function (e) {
  // 查找点击元素最近的class为title的父级，点input也能匹配到外层的title容器
  const element = e.target.closest('.title');
  if (!element) return;
  flashElement(element);
  copyText(element);
});

function copyText(element) {
  // 拼接外层文本和所有子input的value值，可根据需要调整拼接顺序
  let textToCopy = '';
  element.querySelectorAll('input').forEach(input => {
    textToCopy += input.value + ' ';
  });
  textToCopy += element.innerText;

  // 优先使用现代标准Clipboard API，兼容旧浏览器保留原实现
  if (navigator.clipboard) {
    navigator.clipboard.writeText(textToCopy).catch(() => {
      fallbackCopy(textToCopy);
    });
  } else {
    fallbackCopy(textToCopy);
  }
}

// 旧浏览器兼容复制逻辑抽离
function fallbackCopy(textToCopy) {
  const myTemporaryInputElement = document.createElement("input");
  myTemporaryInputElement.type = "text";
  myTemporaryInputElement.value = textToCopy;
  document.body.appendChild(myTemporaryInputElement);
  myTemporaryInputElement.select();
  document.execCommand("Copy");
  document.body.removeChild(myTemporaryInputElement);
}

function flashElement(element) {
  element.classList.add("flash");
  // 只给当前元素绑定一次移除事件，避免重复绑定
  const removeFlash = () => {
    setTimeout(() => {
      element.classList.remove("flash");
      element.removeEventListener("transitionend", removeFlash);
    }, 1500);
  }
  element.addEventListener("transitionend", removeFlash);
}

效果说明 #

修改后点击title容器内任意区域（包括输入框内部）都会触发复制，复制内容包含输入框内的value和外层文本，和页面显示顺序一致。

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