代码之家 › 专栏 › 技术社区 › Ammar Ameerdeen

firefox:keydown事件对象中没有这样的字段inputType

cross-browser firefox angular javascript

Ammar Ameerdeen · 技术社区 · 6 年前

我有一个 input 事件与A keydown 事件以角度绑定到文本框。在keydown事件函数中,我正在接收 输入 对象作为表示Firefox中事件的对象。同时,我收到一个 InputEvent chrome中相同事件的对象。我正在使用 inputType 中的字段 输入输出 在chrome中标识 insertText , deleteContentBackward 或 deleteContentForward 事件如下。

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

问题是没有这样的字段被调用 输入类型 在firefox生成的事件对象中。

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)中的相同事件对象

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
    }

1 回复 | 直到 6 年前

Ammar Ameerdeen 6 年前

这个问题有可能在 this way, in a jquery environment.

在角度上,我用这种方法解决了这个问题。

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