Firefox：在keydown事件对象中没有名为inputType的字段 [英] Firefox : There is no such field called inputType in keydown event object

问题描述

我有一个输入事件和一个 keydown 事件绑定到angular中的文本框。在keydown事件函数中，我收到一个输入对象作为表示firefox中事件的对象。同时，我在chrome中收到同一事件的 InputEvent 对象。我在chrome中的 InputEvent 对象中使用 inputType 字段来识别它是否是 insertText ， deleteContentBackward 或 deleteContentForward 事件如下所示。

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;
}

问题是没有这样的字段叫做 inputType 在firefox生成的事件对象中。

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

Chrome中的事件对象（71.0.3578.98）

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
    }

以下是firefox中相同的事件对象（65.0b7）

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
    }

推荐答案

可以在这种方式，在jquery环境中解决此问题。

在Angular上，我用这种方式解决了这个问题。

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;
}

这篇关于Firefox：在keydown事件对象中没有名为inputType的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！