| 1 | = DOM Input Events = |
| 2 | |
| 3 | Wenson Hsieh, Apple |
| 4 | |
| 5 | - input events fired when DOM mutates (editable elements) |
| 6 | - events of type input |
| 7 | - non-cancellable |
| 8 | |
| 9 | - new spec creates subclasses of input events that are cancellable |
| 10 | |
| 11 | - why? |
| 12 | - pages may want to allow only a subset of rich editing commands |
| 13 | - handle certain editing operations in a custom way |
| 14 | - track edited text using a custom JS-based data model |
| 15 | - what is shown/represented on the page |
| 16 | |
| 17 | - attribute DOMString inputType |
| 18 | - insertRelacementText |
| 19 | - insertFromPaste |
| 20 | - insertCompositionText |
| 21 | - deleteWordBackward |
| 22 | - formatBold |
| 23 | - attribute DOMString? data |
| 24 | - some data attached to the event being fired |
| 25 | - e.g. as the user types, the data field of the event is each newly inserted character |
| 26 | - attribute DataTransfer? dataTransfer |
| 27 | - only for rich editing elements |
| 28 | - way to get HTML representation of contents being transferred |
| 29 | - sequence<StaticRange> getTargetRanges() |
| 30 | - range of text being modified by current input command |
| 31 | |
| 32 | - [https://whsieh.github.io/examples/markdown Demo] of simple markdown editor |
| 33 | - content is bold-able from context menu |
| 34 | - maybe instead we edit the content to represent the intent of the action (wrap the text in “**” for markdown bold) |
| 35 | - take data that is copied/pasted and override what is shown |
| 36 | |
| 37 | - function handler for BeforeInput |
| 38 | - check the different values for `event.inputType` and act accordingly |
| 39 | - one handler for all types |