Android Chrome下xterm.js/ng-terminal退格键异常跳转历史命令求助

问题场景 #

• 依赖环境：ng-terminal，底层xterm.js版本5.0.0
• 测试环境：Android Chrome 109.0.5414.46
• 异常表现：按下退格键时，除了删除当前输入的单个字符，还会持续触发历史命令跳转，同时伴随字符复现

问题分析 #

根据现象推测核心问题出在退格缓冲区：Android Chrome的系统键盘文本缓冲区在应用消费输入文本后未被正确清空，导致退格操作时回溯到该缓冲区，触发xterm.js的历史命令跳转逻辑，同时出现已删除字符复现的情况。

解决方案 #

1. 手动拦截退格键事件，覆盖默认行为 #

通过监听xterm.js的键盘事件，阻止退格键的默认浏览器行为，手动执行字符删除逻辑，避免误触发历史跳转：

// 在ng-terminal初始化完成后添加事件监听
const terminalInstance = ngTerminalComponent.terminal;
terminalInstance.onKey(e => {
  const { key, domEvent } = e;
  // 匹配退格键（包含两种可能的key值）
  if (key === '\x7F' || domEvent.key === 'Backspace') {
    domEvent.preventDefault();
    // 仅执行删除当前字符操作
    terminalInstance.deleteChar();
    // 强制清空输入缓冲区（针对xterm.js内部缓冲区）
    const inputBuffer = terminalInstance._core._inputHandler._buffer;
    if (inputBuffer && inputBuffer.length > 0) {
      inputBuffer.length = 0;
    }
  }
});

2. 升级xterm.js至5.1.0及以上版本 #

xterm.js在5.1.0版本中修复了移动端键盘输入的部分兼容性问题，包括缓冲区处理逻辑的优化，升级后大概率能直接解决该异常。

3. 禁用默认历史命令跳转逻辑 #

初始化terminal时配置自定义输入处理，跳过历史命令跳转的触发条件：

const terminal = new Terminal({
  allowProposedApi: true,
  inputHandler: {
    onKey: (key, event) => {
      // 仅处理正常输入和退格删除，跳过历史跳转
      if (key === '\x7F') {
        terminal.deleteChar();
      } else {
        terminal.write(key);
      }
    }
  }
});

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