React聊天应用：如何区分移动端与桌面端textarea的Enter键行为？

核心思路是通过设备类型区分按键逻辑，移动端保留Enter换行+独立发送按钮的交互，桌面端则用Shift+Enter换行、Enter直接发送，具体实现步骤如下：

1. 准确判断设备类型 #

优先使用window.matchMedia检测触摸设备（移动端/平板），这种方式比userAgent更可靠，还能适配窗口变化（比如平板横竖屏切换）：

import { useState, useEffect } from 'react';

function ChatInput() {
  const [isMobile, setIsMobile] = useState(() => 
    window.matchMedia('(pointer: coarse)').matches
  );

  // 监听设备类型变化（比如平板连接键盘、窗口 resize）
  useEffect(() => {
    const mediaQuery = window.matchMedia('(pointer: coarse)');
    const handleDeviceChange = (e) => setIsMobile(e.matches);
    
    mediaQuery.addEventListener('change', handleDeviceChange);
    return () => mediaQuery.removeEventListener('change', handleDeviceChange);
  }, []);

  // 其他状态和逻辑...
}

(pointer: coarse)表示设备的输入指针是“粗精度”的（比如手指触摸），对应移动端设备；反之(pointer: fine)对应桌面端的鼠标/高精度触控笔。

2. 差异化处理键盘事件 #

针对textarea的onKeyDown事件，根据isMobile分支处理：

const [message, setMessage] = useState('');

const sendMessage = () => {
  if (!message.trim()) return;
  // 这里替换成你的实际发送逻辑（比如调用API、更新聊天记录）
  console.log('发送消息:', message);
  setMessage('');
};

const handleKeyDown = (e) => {
  if (isMobile) {
    // 移动端：Enter 直接换行（保留textarea默认行为），发送交给独立按钮
    return;
  }

  // 桌面端逻辑
  if (e.key === 'Enter') {
    if (e.shiftKey) {
      // Shift+Enter：允许默认换行行为
      return;
    }
    // 单独Enter：阻止默认换行，执行发送
    e.preventDefault();
    sendMessage();
  }
};

3. 渲染输入框和发送按钮 #

return (
  <div className="chat-input-container">
    <textarea
      value={message}
      onChange={(e) => setMessage(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="输入消息..."
      rows={3}
    />
    <button onClick={sendMessage} disabled={!message.trim()}>
      发送
    </button>
  </div>
);

关键说明 #

• 移动端完全依赖独立发送按钮，Enter仅用于换行，符合移动端用户习惯；
• 桌面端通过Shift+Enter换行、Enter发送，提升输入效率；
• 监听媒体查询变化，能自动适配设备切换场景（比如平板外接键盘后自动切换成桌面端逻辑）。

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