`(keyup.backspace)` cannot capture 'shift + backspace'

Question

I am trying to capture every delete and backspace happening in an form input field, and I have doing it the following way:

<input (keyup.enter)="sendData()" (keyup.delete)="clear()" (keyup.backspace)="clear()">

It does work for backspace presses but not when combined with left nor right shift. How can I cover these cases?

Answer 1

I am not sure why the key combinations doesn't work. And I guess the Ctrl combinations doesn't work as well. So in the meantime you could use the keycodes for the combinations as a workaround.

Template

<input (keyup)="onKeyup($event)">

Controller

onKeyup(event: KeyboardEvent) {
  const key = event.keyCode || event.charCode;
  if (key === 13) {               // enter (cr)
    sendData();
  } else if (
    key === 8 || key === 46 ||    // backspace or delete
    (key === 8 && 17) ||          // backspace + ctrl
    (key === 8 && 16) ||          // backspace + shift
    (key === 46 && 17)            // delete + ctrl
  ) {
    clear();
  }
}

Working example: Stackblitz