⌨️ Keyboard Events

Keyboard events let you respond to user key presses for shortcuts, input validation, and more.

Keyboard Event Types

Basic Keyboard Handler

function SearchBox() {
  const [query, setQuery] = React.useState("");

  const handleKeyDown = (e) => {
    console.log("Key pressed:", e.key);
  };

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="Type something..."
    />
  );
}

Detecting Specific Keys

function SearchInput() {
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      console.log("Enter pressed!");
    }
    if (e.key === "Escape") {
      console.log("Escape pressed!");
    }
  };

  return <input onKeyDown={handleKeyDown} placeholder="Press Enter or Escape" />;
}

Keyboard Modifiers

function AdvancedKeyboard() {
  const handleKeyDown = (e) => {
    if (e.ctrlKey && e.key === "s") {
      e.preventDefault();
      console.log("Save shortcut detected");
    }
  };

  return <input onKeyDown={handleKeyDown} placeholder="Try Ctrl+S" />;
}

Available modifiers: `ctrlKey`, `shiftKey`, `altKey`, `metaKey`

✅ Key Takeaways

• Use `onKeyDown` to detect **key presses** with `e.key`

• Check **modifiers** like `ctrlKey`, `shiftKey`, `altKey`, `metaKey`

• `Enter` and `Escape` are common key values to check

• Use `preventDefault()` for browser shortcuts