React中实现j/k全局快捷键：如何判断用户是否处于输入可编辑元素？

核心思路是在全局快捷键监听器里统一判断当前焦点是否处于可文本输入的元素，完全不用修改任何输入组件，实现快捷键逻辑和输入组件的解耦。

具体实现代码 #

可以封装成一个React Hook复用：

import { useEffect } from 'react';

export const useVimListNavigation = () => {
  useEffect(() => {
    const handleGlobalKeyDown = (e) => {
      const activeElement = document.activeElement;
      if (!activeElement) return;

      // 判断是否处于可文本输入区域
      const isTextInput = 
        // 文本类input（排除按钮、复选框等非输入型input）
        (activeElement.tagName === 'INPUT' && !['BUTTON', 'CHECKBOX', 'RADIO', 'SUBMIT', 'RESET'].includes(activeElement.type)) ||
        // textarea
        activeElement.tagName === 'TEXTAREA' ||
        // contenteditable元素（含继承属性的情况）
        (activeElement.isContentEditable && getComputedStyle(activeElement).contentEditable === 'true');

      // 如果在输入区域，直接跳过快捷键逻辑
      if (isTextInput) return;

      // 处理j/k快捷键
      switch(e.key) {
        case 'j':
          e.preventDefault(); // 阻止默认行为（比如页面滚动）
          // 这里写你的向下切换列表项逻辑
          console.log('切换到下一项');
          break;
        case 'k':
          e.preventDefault();
          // 这里写你的向上切换列表项逻辑
          console.log('切换到上一项');
          break;
      }
    };

    document.addEventListener('keydown', handleGlobalKeyDown);
    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
  }, []);
};

使用方式 #

在你的根组件或者需要快捷键的页面组件里直接调用这个Hook即可：

import { useVimListNavigation } from './hooks';

const MailListPage = () => {
  useVimListNavigation();

  // 页面其他逻辑...
  return (
    // 页面内容...
  );
};

关键细节说明 #

1. 为什么不用stopPropagation：给每个输入组件加stopPropagation不仅繁琐，还会破坏事件冒泡的正常流程，而且如果第三方组件里的输入框没加，还是会触发快捷键，全局判断activeElement是更彻底的方案。
2. contenteditable的判断：有些元素的contenteditable是继承父元素的，所以要用getComputedStyle来获取最终的计算值，而不是直接读元素的contentEditable属性。
3. 排除非文本输入型input：像按钮、复选框这类input，用户不会在里面输入j/k，所以不需要跳过快捷键，避免影响正常操作。

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