如何在Chromium输入框中隐藏双击或长按弹出的剪切/复制/粘贴菜单

问题背景 #

在集成Chromium的POS设备或触控笔记本应用中，需要隐藏文本框（input/textarea）在双击或长按时弹出的剪切、复制、粘贴菜单，此前使用user-select: none仅对div等普通元素生效，无法作用于文本框。

可行解决方案 #

1. CSS针对性配置

针对input和textarea元素添加专属样式，利用Chromium支持的webkit私有属性禁用触控呼出菜单及文本选中：

input, textarea {
  -webkit-touch-callout: none; /* 禁用触控设备长按呼出菜单 */
  -webkit-user-select: none; /* 禁用文本选中（Chromium/Safari） */
  user-select: none; /* 标准语法 */
}

注意：此配置会同时禁止用户选中文本框内的内容，若业务需要允许输入但保留选中功能，建议使用JS方法。

2. JavaScript事件拦截

通过监听相关事件阻止默认行为，既能隐藏菜单，也可根据需求保留输入或选中功能：

// 获取所有文本框元素
const inputElements = document.querySelectorAll('input[type="text"], textarea');

inputElements.forEach(el => {
  // 阻止右键菜单（桌面端右键触发）
  el.addEventListener('contextmenu', e => e.preventDefault());
  
  // 阻止文本选中（双击/长按选中触发）
  el.addEventListener('selectstart', e => e.preventDefault());
  
  // 阻止触控设备长按弹出菜单
  el.addEventListener('touchstart', e => {
    e.preventDefault();
    // 手动触发焦点，避免阻止事件后无法输入
    el.focus();
  }, { passive: false }); // 必须设置passive为false，否则preventDefault无效
});

3. 集成Chromium应用全局配置（如Electron）

如果是基于Electron等框架开发的Chromium集成应用，可通过窗口配置全局禁用上下文菜单：

const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  webPreferences: {
    disableContextMenu: true, // 全局禁用页面上下文菜单
    contextIsolation: true
  }
});

此方法会禁用所有元素的上下文菜单，若仅需针对文本框，优先使用前两种方案。

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