使用JavaScript创建临时input复制内容到剪贴板失败，为何无法正常工作？

你遇到的复制失效问题，主要有两个核心原因：

1. 动态创建的input未加入DOM树 #

浏览器无法选中一个不在页面DOM结构里的元素——你创建的input只存在于内存中，没有挂载到页面上，所以el.select()实际上没有真正选中任何内容，后续的复制操作自然拿不到值。

2. document.execCommand('copy')已被废弃 #

这个API已经被标记为废弃状态，虽然部分旧浏览器还能兼容，但它的行为不稳定，不是推荐的实现方式。

解决方案一：修复原有逻辑（兼容旧浏览器） #

只需要把动态创建的input临时添加到DOM中，完成复制后再移除即可：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Copy test</title>
<style>html{background: #000;}</style>
</head>
<body>
<button type="button" id="testButton">Copy</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
let button = document.getElementById('testButton');
button.addEventListener('click', () => {
let el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('value', 'text to copy');
// 关键步骤：将元素添加到DOM中
document.body.appendChild(el);
// 选中输入框内容
el.select();
try {
  const isSuccess = document.execCommand('copy');
  console.log(isSuccess ? "内容已复制！" : "复制失败");
} catch (err) {
  console.error("复制出错：", err);
}
// 复制完成后移除元素，避免DOM冗余
document.body.removeChild(el);
});
});
</script>
</body>
</html>

解决方案二：使用现代Clipboard API（推荐） #

现在浏览器普遍支持更可靠的Clipboard API，不需要创建DOM元素，代码更简洁：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Copy test</title>
<style>html{background: #000;}</style>
</head>
<body>
<button type="button" id="testButton">Copy</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
let button = document.getElementById('testButton');
button.addEventListener('click', async () => {
  try {
    // 直接写入剪贴板
    await navigator.clipboard.writeText('text to copy');
    console.log("内容已成功复制到剪贴板！");
  } catch (err) {
    console.error("复制失败：", err);
  }
});
});
</script>
</body>
</html>

注意事项 #

• Clipboard API需要在HTTPS环境下使用（本地开发的localhost除外）；
• 必须在用户主动交互（比如点击、按键）的回调中触发，否则会被浏览器的安全策略拦截。

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