如何实现从一个可编辑引用块到另一个引用块的内容复制-html教程-PHP中文网

如何实现从一个可编辑引用块到另一个引用块的内容复制

通过 JavaScript 监听提交按钮点击事件，读取源 blockquote 的 innerHTML 并赋值给目标 blockquote，即可完成富文本内容（含 HTML 标签）的完整复制。

通过 javascript 监听提交按钮点击事件，读取源 `blockquote` 的 `innerhtml` 并赋值给目标 `blockquote`，即可完成富文本内容（含 html 标签）的完整复制。

在网页中，若需将一个可编辑的

（如用于笔记、引用或富文本输入区域）中的全部内容（包括嵌套的
、格式标签甚至内联样式）一键复制到另一个同类型区块，最直接且兼容性良好的方式是操作 innerHTML 属性——它能完整保留结构与语义，而非仅提取纯文本。

以下为完整实现步骤：

✅ HTML 结构（注意：ID 应避免纯数字开头，推荐使用字母前缀）
<blockquote contenteditable="true" id="quote-1"><p>这是第一个引用块的内容</p></blockquote>
<blockquote contenteditable="true" id="quote-2"><p>这是第二个引用块（初始为空）</p></blockquote>
<button type="submit" id="copy-btn">复制到目标区块</button>
✅ JavaScript 逻辑（建议置于 DOMContentLoaded 或 <script> 底部）</script>
document.addEventListener('DOMContentLoaded', () => {
  const copyBtn = document.getElementById('copy-btn');
  const sourceBlock = document.getElementById('quote-1');
  const targetBlock = document.getElementById('quote-2');

  copyBtn.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止表单默认提交行为（即使无 form 包裹也建议添加）
    targetBlock.innerHTML = sourceBlock.innerHTML;
  });
});
⚠️ 注意事项：

ID 值 1 和 2 不符合 HTML5 规范（ID 不能以纯数字开头），易导致 getElementById 在部分旧环境失效，务必改用 quote-1、block-a 等合法命名；

使用 innerHTML 会覆盖目标区块原有子节点，若需追加内容，请改用 targetBlock.innerHTML += sourceBlock.innerHTML；

若源内容含用户输入的 <script> 标签，innerHTML 赋值<strong>不会执行脚本（浏览器安全机制），无需额外 XSS 过滤；但若涉及不可信来源数据，仍建议服务端净化； </script>

如需同步光标位置、保留焦点或支持撤销/重做，需引入更复杂的编辑器状态管理（如 contenteditable + Selection API），本方案适用于基础复制场景。

该方法简洁高效，适用于 CMS 后台、教学工具、文档对比组件等需要快速迁移富文本片段的场景。