如何通过onclick事件复制锚点元素的title属性值？

嘿，我来帮你排查下为啥复制没成功～你的思路是对的，但有两个关键小问题导致复制失效：

1. document.execCommand("Copy") 需要先选中内容：这个命令只能复制当前页面中被选中的文本，你直接调用它的话，没有选中任何内容，自然复制不了。
2. 错误使用了copyText.value：copyText已经是从title属性拿到的字符串了，它不是DOM元素，根本没有value属性，所以这里会报错（你可以打开浏览器控制台看看，应该能看到相关错误提示）。

修正后的传统方案代码 #

这里给你调整后的完整代码，我加了注释帮你理解每一步：

<a id="myAnchor" onclick="myFunction()" title="smarty@pants.com" href="#">smarty@pants.com</a>

<script>
function myFunction() {
  // 1. 获取锚点的title值
  var copyText = document.getElementById("myAnchor").title;
  
  // 2. 创建一个临时的textarea元素（用来承载要复制的内容并选中）
  var tempTextarea = document.createElement("textarea");
  // 把title值赋值给textarea的内容
  tempTextarea.value = copyText;
  // 把textarea添加到页面（必须在DOM树里才能选中内容）
  document.body.appendChild(tempTextarea);
  
  // 3. 选中textarea里的所有内容
  tempTextarea.select();
  
  // 4. 执行复制命令
  document.execCommand("Copy");
  
  // 5. 移除临时的textarea，清理页面
  document.body.removeChild(tempTextarea);
  
  // 6. 提示复制成功，这里直接用copyText就行，不用.value
  alert("Copied the text: " + copyText);
}
</script>

更现代的方案推荐 #

另外，document.execCommand其实已经是废弃API了，现在更推荐使用现代的Clipboard API，它的兼容性也很好（除了一些旧版IE）。写法更简洁，也更符合现代浏览器标准：

<a id="myAnchor" onclick="myFunction()" title="smarty@pants.com" href="#">smarty@pants.com</a>

<script>
async function myFunction() {
  const copyText = document.getElementById("myAnchor").title;
  try {
    // 使用Clipboard API写入剪贴板
    await navigator.clipboard.writeText(copyText);
    alert("Copied the text: " + copyText);
  } catch (err) {
    // 处理复制失败的情况（比如用户拒绝了权限）
    console.error('Failed to copy: ', err);
    alert("复制失败，请重试");
  }
}
</script>

注意：这个API需要在HTTPS环境或者localhost下才能正常使用哦。

内容的提问来源于stack exchange，提问作者mr.smith