HTML复制到剪贴板按钮：一键复制文本框内容的完整代码-html教程-PHP中文网

现代浏览器原生支持复制，需用 navigator.clipboard.writetext() 并确保用户手势触发、https/localhost 安全上下文；禁用已废弃的 document.execcommand('copy')；复制 pre/code 内容用 textcontent.trim()；ios safari 首次调用前需用户点击激活。

html复制到剪贴板按钮：一键复制文本框内容的完整代码

点击按钮直接复制 `<textarea></textarea>` 里的文本

不需要额外库，现代浏览器原生支持，关键在 navigator.clipboard.writeText()。但直接调用会失败——它只接受用户手势触发（比如 click），且必须是安全上下文（https 或 localhost）。否则抛出 DOMException: Permission denied。

实操建议：

绑定 click 事件，别用 input 或 blur 触发复制
确保页面在 HTTPS 或 localhost 下运行，HTTP 站点会静默拒绝
加 try/catch 捕获拒绝或读写失败，比如用户手动禁用了剪贴板权限
复制后可临时改变按钮文字（如 “已复制”），但别用 setTimeout 改回——要等用户下次点击再恢复，避免干扰操作节奏

<textarea id="code-input">console.log('hello');</textarea>

<button onclick="copyToClipboard()">复制</button>

<script>
function copyToClipboard() {
  const textarea = document.getElementById('code-input');
  const text = textarea.value;
  navigator.clipboard.writeText(text)
    .then(() => {
      // 成功反馈（可选）
      const btn = event.target;
      const original = btn.textContent;
      btn.textContent = '已复制';
      setTimeout(() => { btn.textContent = original; }, 2000);
    })
    .catch(err => console.error('复制失败:', err));
}
</script>

`document.execCommand('copy')` 已废弃，别用

老方案靠 document.execCommand('copy')，需先 select() 文本框、聚焦、再执行命令。它在 Chrome 91+、Firefox 87+ 已被标记为废弃，Safari 早已不支持。继续用会收到警告，且在新版本中可能彻底失效。

常见错误现象：

控制台出现 Deprecated: document.execCommand('copy') is deprecated.
在 Safari 或新版 Edge 中点击无反应，也不报错
textarea 没有 focus() 就调用 select()，导致选择失败，复制空字符串

如果你维护旧项目，必须迁移。替换逻辑很简单：删掉 select()、focus() 和 execCommand，换成 navigator.clipboard.writeText() 即可。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

复制非 `<textarea></textarea>` 内容（比如预格式化代码块）

很多场景要复制 <pre class="brush:php;toolbar:false;"><code></code> 里的内容，它们不可编辑，不能用 <code>.value</code>。得用 <code>.textContent</code> 提取纯文本，注意过滤换行符和首尾空白——有些代码块渲染后带缩进或空行，直接复制会影响粘贴体验。</pre>

实操建议：

用 element.textContent.trim() 去掉首尾空白
如果需要保留缩进但去掉多余空行，可用 .replace(/\n\s*\n/g, '\n\n') 简单清理
对含 HTML 实体的代码块（如 <），要先用 DOMParser 解析还原，否则复制出来是转义后的字符
按钮放在 <pre class="brush:php;toolbar:false;"></pre> 外部更稳妥，避免点击时意外触发代码块的默认行为（比如 Safari 中双击选中整块）

<pre class="brush:php;toolbar:false;"><code class="js">function foo() {<br>  return true;<br>}</code>

<button onclick="copyCodeBlock(this)">复制代码</button>

<script>
function copyCodeBlock(btn) {
  const pre = btn.closest('pre');
  const code = pre.querySelector('code');
  const text = code.textContent.trim();
  navigator.clipboard.writeText(text).catch(console.error);
}
</script>

移动端 Safari 的兼容性坑

iOS 13.4+ 支持 navigator.clipboard，但有个隐藏限制：如果页面没显式获得焦点（比如从后台切回来），首次调用 writeText() 可能静默失败，不抛异常也不复制。用户必须先手动点击页面任意位置（哪怕空白处），再点复制按钮才生效。

绕过方式有限，最可靠的是加一层轻量提示：

检测 navigator.userAgent 是否含 iOS 或 Mac OS X 且内核为 WebKit
首次点击复制按钮时，若检测到 iOS，先弹出 alert('请轻触屏幕任意位置激活剪贴板')（虽然打扰，但有效）
或者改用 document.execCommand 降级——仅限 iOS，其他平台一律走新 API
注意：iOS 上 textarea 的 readonly 属性会导致 select() 失效，若用降级方案，得临时移除 readonly 再恢复