Ad
Firefox : There Is No Such Field Called InputType In Keydown Event Object
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
}
Ad
Answer
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;
}
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad