I am trying to disable Backspace inside the input field

Question

In this example I want to disable the backspace key on the input field.

I am passing the $event in my template as:

<input (input)="onInput($event)">

while in my app.component.ts file the function is like this:

onInput(e:KeyboardEvent){
if(e.keycode===8){
e.preventDefault();
}else{
console.log(e.which);
}

Also Typescript is complaining about e.keycode and e.which as being deprecated.

Edit: I forgot to add double quotes in the question on : (input)="onInput()"

you may check this: https://stackoverflow.com/questions/35869026/prevent-backspace-in-input-text-box — Sunil, Jan 18 '21 at 11:31

score 1 · Accepted Answer · answered Jan 18 '21 at 11:25

1

You have to change the output of input element from (input) to (keydown)

answered Jan 18 '21 at 11:25

It works. but what is the difference ? does it not work with (input) ? – Aizaz Jan 18 '21 at 11:28
(input) output emit the input field details not the keyboard related details but you need keycode that is available in keyBoardevent which is emitted by (keydown) output or (keyup) – Avirup Chakraborty Jan 18 '21 at 11:30
Oh........ Okay . Thanks for the Answer. it makes sense now. – Aizaz Jan 18 '21 at 11:32
What about the Issue of deprecation though. is there a way around that ? especially with event.which . – Aizaz Jan 18 '21 at 11:38

1 Answers1