javascript - Firefox:keydown 事件对象中没有名为 inputType 的字段
问题描述
我有一个input
事件和一个keydown
绑定到角度文本框的事件。在 keydown 事件函数中,我接收一个input
对象作为代表 Firefox 中事件的对象。同时,我InputEvent
在 chrome 中接收到同一事件的对象。我正在使用chromeinputType
中的对象中的字段InputEvent
来识别它是insertText
,deleteContentBackward
还是deleteContentForward
下面给出的事件。
switch(event.inputType) {
case 'insertText':
//do something
break;
case 'deleteContentBackward':
//do something
break;
case 'deleteContentForward':
//do something
break;
}
inputType
问题是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
}
解决方案
在jquery环境中,可以通过这种方式解决这个问题。
在 Angular 上,我以这种方式解决了这个问题。
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;
}
推荐阅读
- javascript - 为什么我的价值观未定义?
- react-native - React-Native 以 JSON 格式发送 PDF
- selenium - 无法使用 selenium webdriver 访问下拉列表的元素
- r - 用另一个数据框的值替换一个值
- node.js - 我们可以将 Node API 转换为 Mulesoft 吗?
- r - 具有基于行号的字符值的新列
- c# - 具有 sytem.DateTime 值 C# 的属性的单元测试
- c# - 如何绑定字典
到 CheckBoxFor? - database - 如何在 Spring Boot 中的 DatabaseConfig 中设置属性
- java - 我们可以将装饰对象的实例设为私有而不是在抽象装饰器中保护吗?