DOM Input Events

Wenson Hsieh, Apple

• input events fired when DOM mutates (editable elements)
  • events of type input
  • non-cancellable

• new spec creates subclasses of input events that are cancellable

• why?
  • pages may want to allow only a subset of rich editing commands
  • handle certain editing operations in a custom way
  • track edited text using a custom JS-based data model
    • what is shown/represented on the page

• attribute DOMString inputType
  • insertRelacementText
  • insertFromPaste
  • insertCompositionText
  • deleteWordBackward
  • formatBold
• attribute DOMString? data
  • some data attached to the event being fired
  • e.g. as the user types, the data field of the event is each newly inserted character
• attribute DataTransfer? dataTransfer
  • only for rich editing elements
  • way to get HTML representation of contents being transferred
• sequence<StaticRange> getTargetRanges()
  • range of text being modified by current input command

• ​Demo of simple markdown editor
  • content is bold-able from context menu
  • maybe instead we edit the content to represent the intent of the action (wrap the text in “” for markdown bold)
  • take data that is copied/pasted and override what is shown

• function handler for BeforeInput
  • check the different values for event.inputType and act accordingly
  • one handler for all types