React输入框实现英文按键映射格鲁吉亚文输入问题求助

由于react-language-keyboard版本过旧导致React版本不兼容，我们可以通过自定义字符映射+事件监听的方式实现需求：按下英文键盘的a/b/c等按键时，输入框自动显示对应的格鲁吉亚字符（如აბც）。

实现步骤 #

1. 定义英-格字符映射表 #

先创建一个按键到格鲁吉亚字符的映射对象，覆盖你需要的所有按键：

const engToGeoMap = {
  'a': 'ა',
  'b': 'ბ',
  'c': 'ც',
  'd': 'დ',
  'e': 'ე',
  'f': 'ფ',
  'g': 'გ',
  // 可根据格鲁吉亚键盘布局继续扩展其他字符
  'A': 'ა', // 若需要大写对应，可调整为大写格鲁吉亚字符
  'B': 'ბ'
};

2. 编写React输入组件 #

使用函数组件实现，通过keydown事件拦截按键并替换字符，同时处理光标位置避免错位：

import { useState, useRef } from 'react';

function GeorgianInput() {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  const handleKeyDown = (e) => {
    // 跳过特殊按键（回车、退格、方向键等），保留原生功能
    const specialKeys = ['Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab', 'Shift', 'Control', 'Alt'];
    if (specialKeys.includes(e.key)) return;

    // 从映射表中获取对应的格鲁吉亚字符
    const geoChar = engToGeoMap[e.key];
    if (geoChar) {
      e.preventDefault(); // 阻止原生英文输入
      const input = inputRef.current;
      const start = input.selectionStart;
      const end = input.selectionEnd;
      // 替换选中内容或插入字符到光标位置
      const newValue = value.slice(0, start) + geoChar + value.slice(end);
      setValue(newValue);
      // 调整光标位置到插入字符之后
      setTimeout(() => {
        input.selectionStart = input.selectionEnd = start + 1;
      }, 0);
    }
  };

  return (
    <input
      ref={inputRef}
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="输入英文按键显示格鲁吉亚文"
    />
  );
}

export default GeorgianInput;

关键细节说明 #

• 特殊按键过滤：保留回车、退格等按键的原生功能，避免影响输入体验
• 光标位置处理：通过selectionStart和selectionEnd获取光标/选中区域，插入字符后重置光标位置，解决直接替换值导致光标跳转到末尾的问题
• 映射表扩展：可根据完整的格鲁吉亚键盘布局补充更多字符映射，满足全输入需求

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