Solid.js中textarea如何检测按键或获取原生键盘事件？

首先要明确：onInput 事件的触发时机是输入内容变化（比如粘贴、输入法输入、按键输入），它对应的事件对象是 InputEvent，本身就没有 key 和 shiftKey 属性——这不是Solid.js的限制，是浏览器原生的规则。你需要用键盘事件来捕获按键行为。

方案1：直接使用onKeyDown/onKeyUp事件 #

不需要额外依赖，直接给textarea绑定键盘事件，和onInput职责分离：

<textarea 
  onKeyDown={(event) => {
    // 检测回车键
    if (event.key === 'Enter') {
      // 阻止默认行为（避免textarea自动换行，按需使用）
      if (!event.shiftKey) {
        event.preventDefault();
        console.log("按下了回车键");
        // 执行你的提交或其他逻辑
      } else {
        console.log("按下了Shift+回车键");
        // 允许换行或执行对应逻辑
      }
    }
  }}
  onInput={(event) => {
    setState(event.currentTarget.value);
  }}
/>

键盘事件负责捕获按键行为，onInput 专注同步输入内容，不会出现竞态问题。

方案2：使用useKeyDownEvent（适合全局/复杂场景） #

如果需要全局监听按键或处理复杂键盘逻辑，可以用Solid.js的Keyboard Primitive，但要注意限定事件目标，避免影响其他输入框：

import { useKeyDownEvent } from '@solidjs-primitives/keyboard';

function TextareaComponent() {
  const [value, setValue] = createSignal('');

  useKeyDownEvent((event) => {
    // 仅处理当前textarea的按键事件
    if (event.target instanceof HTMLTextAreaElement) {
      if (event.key === 'Enter') {
        if (!event.shiftKey) {
          event.preventDefault();
          console.log("提交内容:", value());
        }
      }
    }
  });

  return (
    <textarea 
      value={value()}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

关键说明 #

InputEvent 是用于处理输入内容变更的事件，触发场景不局限于键盘操作（比如鼠标粘贴、语音输入都会触发），所以原生就不携带键盘按键相关属性。只有KeyboardEvent对应的事件（onKeyDown/onKeyPress/onKeyUp）才能获取key、shiftKey这类键盘属性。

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