Global playground

Use this page to explore contenteditable behavior without a specific documented case.

contenteditable playground

Combine your real OS, device, browser, and keyboard. Use this page only as a controlled surface to inspect and record event behavior.

Metadata
OS: Any
Device: Desktop or Laptop
Browser: Chrome
Keyboard: US
Description
Use this scenario to observe the event order for basic typing, backspace, arrow keys, and IME composition in a plain contenteditable region.
Suggested reproduction steps
  1. Focus the editable area.
  2. Type ASCII text and observe keydown, beforeinput, and input events.
  3. Switch to an IME and type composed characters.
  4. Use Backspace and the arrow keys to move the caret.

Try typing here. Logs will appear on the right.

Use different OS, devices, browsers, and keyboard layouts in the real world. Record what actually happens as issues.

Event log
Newest events appear at the top. Use this when preparing GitHub issues.
0 events
Interact with the editable area to see events here.