如何通过JavaScript禁用右键菜单及复制粘贴，仅保留输入框正常功能？

核心逻辑 #

通过全局监听相关交互事件，判断触发事件的元素是否为输入类元素（input、textarea、可编辑元素），若是则允许默认行为，否则阻止；同时配合CSS强化文本禁用选中的效果，确保全站覆盖且不影响输入框正常编辑。

完整实现代码 #

JavaScript 部分

// 禁用右键上下文菜单
document.addEventListener('contextmenu', (e) => {
  const isEditable = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable;
  if (!isEditable) e.preventDefault();
});

// 禁用文本选中
document.addEventListener('selectstart', (e) => {
  const isEditable = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable;
  if (!isEditable) e.preventDefault();
});

// 禁用复制、剪切、粘贴操作
['copy', 'cut', 'paste'].forEach(evt => {
  document.addEventListener(evt, (e) => {
    const isEditable = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable;
    if (!isEditable) e.preventDefault();
  });
});

CSS 辅助强化

/* 全局禁用文本选中 */
body {
  user-select: none;
  -webkit-user-select: none; /* Safari/Chrome 兼容 */
  -moz-user-select: none;    /* Firefox 兼容 */
  -ms-user-select: none;     /* IE/Edge 兼容 */
}

/* 恢复输入类元素的文本选中与编辑权限 */
input, textarea, [contenteditable="true"] {
  user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
}

关键说明 #

1. 事件委托机制：所有事件绑定在document上，页面后续动态加载的元素也能自动生效，无需额外处理。
2. 覆盖全输入场景：判断逻辑包含原生输入框、文本域，以及设置contenteditable="true"的富文本编辑元素，确保所有可编辑区域不受限制。
3. 局限性明确：正如你所述，这种方法仅能有效威慑非技术人员（如营销/商务人员），具备技术能力的用户仍可通过禁用JavaScript、查看页面源码等方式获取内容，无法做到完全阻止。

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