lang/js/ InputChangeDetection

Use addEventListener("input", e => { ... }).

Example

textarea.changed {
  border: 5px solid red;
}

const shortcuts = new Map()
addEventListener("load",_ => {
  addEventListener("keydown", e => {
    let ae = document.activeElement.tagName.toLowerCase()
    // sometimes backquote sends key == ¬
    let k = e.key.toLowerCase()
    if( e.code == "Backquote" ) k = "backquote" // so we get 
    let t = k // we save k so that we can see if a single key was pressed -- we ignore keypresses when in an input
    if( t === "control" || t === "shift" || t === "alt" || t === "meta" ) return true
    // M-A-C-S
    if( e.shiftKey ) t = "S-"+t
    if( e.ctrlKey ) t = "C-"+t
    if( e.altKey ) t = "A-"+t
    if( e.metaKey ) t = "M-"+t
    if( ( ae == "textarea" || ae == "input" ) && ! ( e.ctrlKey | e.altKey | e.metaKey ) ) {
      // if typing into a textarea or input, ignore keys unless ctrl alt or meta is held
      return true
    }
    if( t === "C-r" ) return true
    if( shortcuts.has(t) ) { return shortcuts.get(t)(e) }
  })
})
// clean/dirty
addEventListener("load", _ => {
  const textarea = document.querySelector("textarea")
  let changed = false
  const update = _ => {
    if( changed ) textarea.classList.add("changed")
    else textarea.classList.remove("changed")
  }
  const clean = _ => {
    changed = false
    update()
  }
  const dirty = _ => {
    changed = true
    update()
  }
  shortcuts.set("C-s", e => {
    e.preventDefault()
    clean()
  })
  textarea.addEventListener("input", e => {
    dirty()
  })
})