Firefox : There is no such field called inputType in keydown event object

Question

I have an input event and a keydown event bound to a textbox in angular. In keydown event function I'm recieving an input object as the object representing the event in firefox. At the same time, I'm receiving an InputEvent object for the same event in chrome. I'm using the inputType field in the InputEvent object in chrome to identify if it is insertText , deleteContentBackward or deleteContentForward event as given below.

switch(event.inputType) {
   case 'insertText':
     //do something
   break;
   case 'deleteContentBackward':
     //do something
   break;
   case 'deleteContentForward':
     //do something
   break;
}

The problem is there is no such field called inputType in the event object generated by firefox.

Event object in Chrome (71.0.3578.98)

InputEvent {
        bubbles: true,
        cancelBubble: false,
        cancelable: false,
        composed: true,
        currentTarget: null,
        data: null,
        dataTransfer: null,
        defaultPrevented: true,
        detail: 0,
        eventPhase: 0,
        **inputType: "deleteContentBackward"**,
        isComposing: false,
        isTrusted: true,
        path: (15) [input#search-input.form-control.custom-input.ng-valid.ng-dirty.ng-touched, div.col-md-9.search-input-container, div.col-12.no-padding.search.custom-search-box, div.row.input-group.col-lg-6.col-md-7.col-sm-9.col-xs-12, div.search-section.col-12, app-search-header, div.container, section#homeBanner.intro, app-header, app-root, div.wrapper, body.is-search-open, html.no-js, document, Window],
        returnValue: false,
        sourceCapabilities: null,
        srcElement: input#search-input.form-control.custom-input.ng-valid.ng-dirty.ng-touched,
        target: input#search-input.form-control.custom-input.ng-valid.ng-dirty.ng-touched,
        timeStamp: 2484875.1999999997,
        type: "input",
        view: null,
        which: 0
    }

Given below is the same event object in firefox (65.0b7)

input{
        bubbles: true,
        ​cancelBubble: false,
        ​cancelable: false,
        ​composed: true,
        ​currentTarget: null,
        ​defaultPrevented: false,
        ​detail: 0,
        ​eventPhase: 0,
        ​explicitOriginalTarget: <input id="search-input" class="form-control custom-inpu…lid ng-dirty ng-touched" _ngcontent-c10="" type="text" ng-reflect-model="a" placeholder="What are you looking for ?">,
        ​isComposing: false,
        ​isTrusted: true,
        ​layerX: 0,
        ​layerY: 0,
        ​originalTarget: <input id="search-input" class="form-control custom-inpu…lid ng-dirty ng-touched" _ngcontent-c10="" type="text" ng-reflect-model="a" placeholder="What are you looking for ?">,
        ​pageX: 0,
        ​pageY: 0,
        ​rangeOffset: 0,
        ​rangeParent: null,
        ​returnValue: true,
        ​srcElement: <input id="search-input" class="form-control custom-inpu…lid ng-dirty ng-touched" _ngcontent-c10="" type="text" ng-reflect-model="a" placeholder="What are you looking for ?">​
        target: <input id="search-input" class="form-control custom-inpu…lid ng-dirty ng-touched" _ngcontent-c10="" type="text" ng-reflect-model="a" placeholder="What are you looking for ?">,
        ​timeStamp: 283997,
        **​type: "input"**, // For insert and delete events this field won't change
        ​view: null,
        ​which: 0
    }

Answer 1

It is possible to solve this problem in this way, in a jquery environment.

On Angular, I solved the problem this way.

isBackSpace = false;

onKeyDown(event:KeyboardEvent){
  this.isBackSpace = event.which === 8;
  /// rest of the method
}

onSearchChange(event){
  if (event.inputType === 'deleteContentForward' || event.inputType === 'deleteContentBackward' || this.IsBackSpace) {
    // delete event handling code.
  } else {
    // insert event handling code.
  }
  this.isBackSpace = false;
}