如何覆盖剪切/复制/粘贴的标准操作，模拟右键弹出菜单？

1. 禁用系统默认相关操作 #

• 阻止原生右键菜单弹出：

  document.addEventListener('contextmenu', e => e.preventDefault());
  

• 拦截剪切/复制/粘贴的快捷键（适配Windows和Mac）：

  document.addEventListener('keydown', e => {
    const isModifierKey = e.ctrlKey || e.metaKey;
    if (isModifierKey && ['x', 'c', 'v'].includes(e.key.toLowerCase())) {
      e.preventDefault();
    }
  });
  

2. 实现自定义右键菜单 #

• 编写固定定位的菜单容器，默认隐藏：

  <div id="customMenu" style="display:none; position:fixed; background:#fff; border:1px solid #ccc; padding:8px; border-radius:4px; z-index:9999;">
    <div class="menu-item" data-action="cut">剪切</div>
    <div class="menu-item" data-action="copy">复制</div>
    <div class="menu-item" data-action="paste">粘贴</div>
  </div>
  

• 监听右键点击事件定位显示菜单，点击页面其他区域隐藏：

  const customMenu = document.getElementById('customMenu');
  document.addEventListener('contextmenu', e => {
    e.preventDefault();
    customMenu.style.left = `${e.pageX}px`;
    customMenu.style.top = `${e.pageY}px`;
    customMenu.style.display = 'block';
  });
  document.addEventListener('click', () => customMenu.style.display = 'none');
  

3. 实现自定义剪贴板存储与操作逻辑 #

• 用全局变量维护自定义剪贴板：

  const customClipboard = {
    content: null,
    contentType: 'text' // 可扩展支持HTML、图片等类型
  };
  

• 复制操作：获取选中内容存入自定义剪贴板

  function handleCopy() {
    const selection = window.getSelection();
    if (!selection.toString()) return;
    customClipboard.content = selection.toString();
    customClipboard.contentType = 'text';
  }
  

• 剪切操作：复制后删除原内容

  function handleCut() {
    handleCopy();
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      selection.getRangeAt(0).deleteContents();
    }
  }
  

• 粘贴操作：将自定义剪贴板内容插入光标位置

  function handlePaste() {
    if (!customClipboard.content) return;
    const activeEl = document.activeElement;
    
    // 处理输入框/textarea场景
    if (['INPUT', 'TEXTAREA'].includes(activeEl.tagName)) {
      const start = activeEl.selectionStart;
      const end = activeEl.selectionEnd;
      activeEl.value = `${activeEl.value.substring(0, start)}${customClipboard.content}${activeEl.value.substring(end)}`;
      activeEl.selectionStart = activeEl.selectionEnd = start + customClipboard.content.length;
    } else {
      // 处理普通文本节点/可编辑元素场景
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(customClipboard.content));
      }
    }
  }
  

4. 绑定菜单与快捷键操作 #

• 给菜单选项绑定点击事件：

  document.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('click', () => {
      const action = item.dataset.action;
      if (action === 'copy') handleCopy();
      else if (action === 'cut') handleCut();
      else if (action === 'paste') handlePaste();
      customMenu.style.display = 'none';
    });
  });
  

• 给快捷键绑定对应操作（补充到keydown监听中）：

  document.addEventListener('keydown', e => {
    const isModifierKey = e.ctrlKey || e.metaKey;
    const key = e.key.toLowerCase();
    if (isModifierKey) {
      switch(key) {
        case 'c':
          e.preventDefault();
          handleCopy();
          break;
        case 'x':
          e.preventDefault();
          handleCut();
          break;
        case 'v':
          e.preventDefault();
          handlePaste();
          break;
      }
    }
  });
  

5. 适配特殊场景 #

• 若涉及富文本编辑器，可扩展自定义剪贴板存储HTML内容，粘贴时用insertAdjacentHTML或创建DOM节点插入。
• 针对contenteditable="true"的元素，需调整光标位置维护逻辑，确保粘贴后光标处于内容末尾。

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