InputEvent types for deletion commands

concepts

1. InputType Monitor

   Type in the editor, select text, then press deletion keys. The monitor shows the exact inputType value for each beforeinput event — including the new values for non-collapsed selections.

2. Deletion Type Guide

   Reference table of all deletion-related inputType values, what key combinations trigger them, and how Chrome 145 maps selection-based deletions to the correct granularity type.

3. Undo Coalescer

   Live contenteditable that uses Chrome 145's deletion inputType distinctions to chunk undo history sensibly — coalescing rapid Backspaces but breaking on selection-deletes.

4. Rich Text Editor

   A mini contenteditable editor that intercepts beforeinput events and uses inputType to build a granularity-aware undo history. Word-deletes and selection-deletes each break the chain; character-deletes coalesce — powered by the Chrome 145 fix.

why it shipped

The InputEvent spec defines granular inputType values like deleteWordBackward and deleteWordForward for word-by-word deletion. Rich text editors implementing custom undo/redo stacks use these types to build accurate edit histories. Before Chrome 145, pressing Ctrl+Backspace while text was selected reported deleteContentBackward (character granularity) instead of deleteWordBackward, causing editors to record the wrong edit type and produce incorrect undo behaviour.

inputType values for deletion

// Listen on contenteditable or input elements
element.addEventListener('beforeinput', event => {
  // event.inputType values for deletion:
  //   'deleteContentBackward'   — Backspace (character)
  //   'deleteContentForward'    — Delete (character)
  //   'deleteWordBackward'      — Ctrl+Backspace (word)
  //   'deleteWordForward'       — Ctrl+Delete (word)
  //   'deleteSoftLineBackward'  — Shift+Backspace or platform line delete
  //   'deleteSoftLineForward'   — Shift+Delete
  //   'deleteHardLineBackward'  — Ctrl+Shift+Backspace (hard line)
  //   'deleteHardLineForward'   — Ctrl+Shift+Delete

  // Chrome 145: non-collapsed selection deletions now report the
  // CORRECT word/line granularity type instead of always returning
  // 'deleteContentBackward' / 'deleteContentForward'

  console.log(event.inputType); // e.g. 'deleteWordBackward'
  console.log(event.getTargetRanges()); // affected ranges
});

references

• ChromeStatus entry
• MDN — InputEvent.inputType
• Input Events Level 2 spec