如何在Monaco Editor中禁用手机键盘弹出？设置readOnly:true仍无效

仅设置 readOnly: true 无法阻止移动端键盘弹出，因为该配置只是禁用编辑功能，但点击编辑器仍会触发输入框焦点事件，进而唤起系统键盘。以下是几种可行的解决方法：

方法一：监听焦点事件并强制失焦 #

结合基础只读配置，拦截编辑器的焦点事件，让编辑器主动失去焦点，避免触发键盘：

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: '你的只读内容',
  language: 'javascript',
  readOnly: true
});

// 编辑器获取焦点时立即失焦
editor.onDidFocusEditorText(() => {
  editor.blur();
  // 额外确保当前活跃元素失焦
  document.activeElement?.blur();
});

方法二：拦截移动端触摸/点击事件 #

直接在编辑器容器上拦截触摸和点击事件的默认行为，从源头阻止焦点触发：

const container = document.getElementById('editor-container');
const editor = monaco.editor.create(container, {
  value: '你的只读内容',
  language: 'javascript',
  readOnly: true
});

// 判断是否为移动设备
const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobileDevice) {
  // 拦截触摸事件
  container.addEventListener('touchstart', (e) => {
    e.preventDefault();
  }, { passive: false });

  // 拦截点击事件
  container.addEventListener('click', (e) => {
    e.preventDefault();
  });
}

注：此方法会保留桌面端的正常交互（如滚动、选中文本），仅限制移动端的焦点触发。

方法三：CSS禁用交互（谨慎使用） #

如果不需要用户与编辑器有任何交互（包括选中文本、滚动），可以通过CSS禁用指针事件：

.monaco-editor .view-lines {
  pointer-events: none;
}

注意：此方法会完全阻断编辑器内容区域的所有鼠标/触摸交互，根据需求选择。

额外注意事项 #

• 测试需在真实移动设备上进行，部分模拟器的键盘触发逻辑与真机存在差异；
• 确保使用的Monaco Editor版本为较新版本，旧版本可能存在事件监听的兼容性问题；
• 若需保留选中文本的功能，优先选择方法一，方法二也可配合文本选择逻辑调整。

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