如何用HTML和JavaScript实现格式化文本复制（禁用快捷键、右键，无外部库）

现代浏览器推荐使用Clipboard API实现剪贴板操作，这是替代已废弃execCommand()的标准方案，完全不需要外部库，下面是针对你需求的完整实现，对JS新手友好：

1. HTML结构 #

准备两个核心元素：

• 可见的触发按钮
• 隐藏的容器，用于存放带格式的目标文本（方便直观编辑格式）

<!-- 触发复制的按钮 -->
<button id="copyBtn">复制格式化文本</button>

<!-- 隐藏的格式化内容容器 -->
<div id="contentToCopy" style="display: none;">
  <h3>复制的标题内容</h3>
  <p>这是普通文本，<strong>这里是加粗内容</strong>，还有换行<br>这是第二行文本。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

2. JavaScript代码逻辑 #

核心用navigator.clipboard.write()方法，通过构造ClipboardItem传递格式化的HTML内容，粘贴时会保留原格式：

// 获取页面元素
const copyBtn = document.getElementById('copyBtn');
const contentElement = document.getElementById('contentToCopy');

// 给按钮绑定点击事件
copyBtn.addEventListener('click', async () => {
  try {
    // 提取容器内的HTML格式化内容
    const htmlContent = contentElement.innerHTML;
    
    // 构造剪贴板项，指定数据类型为HTML
    const clipboardItem = new ClipboardItem({
      'text/html': new Blob([htmlContent], { type: 'text/html' })
    });
    
    // 写入剪贴板
    await navigator.clipboard.write([clipboardItem]);
    
    // 复制成功提示
    alert('格式化文本已复制到剪贴板！');
  } catch (err) {
    // 错误处理（比如浏览器不支持、权限问题）
    console.error('复制失败:', err);
    alert('复制失败，请检查浏览器权限或兼容性');
  }
});

3. 关键细节说明 #

• 隐藏容器的作用：可以直接在HTML里编辑格式化内容，不用在JS里拼接复杂的HTML字符串，新手更容易上手。
• 兼容性：主流浏览器（Chrome、Firefox、Edge、Safari 13.1+）都支持该API，适合现代网页场景。
• 安全要求：Clipboard API需要在HTTPS环境或localhost下运行，本地开发用localhost没问题，线上要部署在HTTPS服务器。
• 可选：同时支持纯文本：如果需要让用户粘贴时可选纯文本/格式化文本，可以给ClipboardItem添加纯文本类型：

  const clipboardItem = new ClipboardItem({
    'text/html': new Blob([htmlContent], { type: 'text/html' }),
    'text/plain': new Blob([contentElement.textContent], { type: 'text/plain' })
  });
  

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