React+TypeScript项目移动端Enter键无响应问题求助

看起来你遇到的是移动端虚拟键盘与桌面端键盘事件不一致的问题——很多移动端虚拟键盘的Enter键并不会返回Enter或NumpadEnter的code值，这就是为什么你添加了NumpadEnter判断后问题依然存在的原因。下面给你几个可靠的解决思路：

1. 改用e.key替代e.code做判断 #

e.code是基于物理键盘的键位标识，但移动端虚拟键盘没有对应的物理键，所以返回的code可能不符合预期。而e.key是基于按键的功能，不管是实体键盘还是虚拟键盘的Enter键，都会返回'Enter'，兼容性更好。

修改你的handleKeyUp函数：

const handleKeyUp = (e: KeyboardEvent) => {
  // 用e.key判断，同时增加trim()避免空字符串或纯空格的情况
  if(e.key === 'Enter' && inputText.trim() !== '') {
    onEnter(inputText.trim());
    setInputText('');
  }
}

2. 改用表单的onSubmit事件（更推荐） #

移动端虚拟键盘通常会将"完成"或"回车"按钮映射为表单的提交操作，使用表单提交事件不仅更符合语义化，还能兼容所有移动端设备的虚拟键盘行为。

重构你的组件：

import * as C from './styles';
import { useState, FormEvent } from 'react';
import { IoMdAddCircle } from 'react-icons/io';

type Props = {
  onEnter: (taskName: string) => void
};

export const AddArea = ({ onEnter }: Props) => {
  const [inputText, setInputText] = useState('');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault(); // 阻止表单默认跳转行为
    if(inputText.trim() !== '') {
      onEnter(inputText.trim());
      setInputText('');
    }
  }

  return (
    {/* 将Container作为form元素，绑定submit事件 */}
    <C.Container as="form" onSubmit={handleSubmit}>
      <div className='image'><IoMdAddCircle fontSize={26} /></div>
      <input 
        type="text" 
        placeholder='Adicione uma tarefa' 
        value={inputText} 
        onChange={e=>setInputText(e.target.value)}
      />
    </C.Container>
  );
};

3. 调试确认移动端实际触发的事件值 #

如果上面的方案还不生效，建议你在移动端调试时打印事件的具体值，确认虚拟键盘触发的key或code是什么：

const handleKeyUp = (e: KeyboardEvent) => {
  console.log('Key:', e.key, 'Code:', e.code); // 在移动端浏览器调试工具查看输出
  if(e.key === 'Enter' && inputText.trim() !== '') {
    onEnter(inputText.trim());
    setInputText('');
  }
}

通过这个方法你可以精准定位移动端虚拟键盘返回的事件标识，再针对性调整判断逻辑。

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