为何document.execCommand(copy)被划除且复制功能失效？

你遇到的问题是document.execCommand("copy")被编辑器划除，且复制功能无法正常工作。你的代码如下：

原JavaScript代码 #

var $temp = $("<input>");
var $url = $(location).attr('href');

$('.play_all').on('click', function() {
  $("body").append($temp);
  $temp.val($url).select();
  document.execCommand("copy");
  $temp.remove();
  $("copyUrl").text("URL copied!");
});

原HTML代码 #

<center>
  <button class="clipboard">Click me to copy current Url</button>
  <p>Have you already clicked?</p>
</center>

问题原因 #

1. execCommand已被废弃：这个API属于旧版浏览器的操作方式，现在已被标记为过时，编辑器会用划除样式提示你它不再被推荐使用，部分浏览器未来可能会停止支持。
2. 代码逻辑错误：
   • 按钮类名是clipboard，但JS里监听的是.play_all，事件根本绑定不上
   • 最后修改文本的选择器$("copyUrl")缺少符号（应该是#copyUrl或.copyUrl），且原HTML里没有对应的提示元素

解决方法 #

改用现代的Clipboard API（navigator.clipboard.writeText()），这是当前官方推荐的剪贴板操作方案，同时修正代码里的逻辑错误：

修正后的完整代码 #

HTML（补充提示元素）

<center>
  <button class="clipboard">Click me to copy current Url</button>
  <p id="copyTip">Have you already clicked?</p>
</center>

JavaScript（使用Clipboard API）

// 绑定按钮点击事件
document.querySelector('.clipboard').addEventListener('click', async function() {
  try {
    // 获取当前页面URL
    const currentUrl = window.location.href;
    // 将URL写入剪贴板
    await navigator.clipboard.writeText(currentUrl);
    // 更新提示文本
    document.getElementById('copyTip').textContent = "URL copied!";
  } catch (err) {
    // 处理复制失败的情况
    document.getElementById('copyTip').textContent = "Copy failed, please try again!";
    console.error('复制出错:', err);
  }
});

注意事项 #

• Clipboard API需要在安全上下文（HTTPS协议或localhost本地环境）中使用，普通HTTP环境下可能无法正常运行
• 无需创建临时input元素，API直接处理文本写入，代码更简洁
• 加入了错误捕获逻辑，能应对用户拒绝剪贴板权限等异常情况

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