jQuery .select() 复制变量文本到剪贴板失效问题咨询

• 你通过$("#myref").text()拿到的copyText是纯文本字符串，字符串本身没有DOM元素专属的select()方法，代码运行到这一步会直接抛出类型错误，后续逻辑直接中断，根本走不到复制那一步。
• 浏览器原生的document.execCommand("copy")存在生效限制：它要求当前选中的内容必须来自页面里的可编辑表单元素（input、textarea），普通div/span的文本、存在内存里的字符串，都没法通过这个命令完成复制。
• 你在复制流程前加了alert(copyText)的弹窗逻辑：模态弹窗会打断浏览器对用户交互手势的上下文校验，就算修复了前两个问题，浏览器也会因为检测不到和用户点击直接关联的操作链路，拦截复制请求。

function copyMyID(e) {
  // 显式接收事件对象，避免依赖全局隐式event的兼容问题
  e.preventDefault();
  const copyContent = $("#myref").text();

  // 临时创建隐藏的文本域承接待复制内容
  const tempTextArea = document.createElement("textarea");
  tempTextArea.value = copyContent;
  // 把元素移到视口外，既不影响页面显示，又能正常选中内容
  tempTextArea.style.position = "fixed";
  tempTextArea.style.top = "0";
  tempTextArea.style.left = "-1000px";
  document.body.appendChild(tempTextArea);

  // 选中内容并执行复制
  tempTextArea.select();
  document.execCommand("copy");

  // 操作完成后移除临时元素，不残留DOM节点
  document.body.removeChild(tempTextArea);
}

绑定事件时不要额外给函数传无关参数，比如按钮绑定的写法为 $("#copyBtn").on("click", copyMyID)，jQuery会自动把事件对象作为第一个参数传给回调函数，不需要在函数里直接调用全局的event变量。

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