Gfilui

I'm trying to clear an input when a user presses comma (,). So what I did was, on (keypress) I would check the keyCode and if it's a comma I would clear the input by setting the input value to input.value = ''.

The problem though is that even if it clears the letters I type in, it doesn't clear the comma. What am I doing wrong?

This is a fiddle of the problem.

Steps:

1. Type in abc.


2. Type ,
   


3. Observe that abc was cleared but the input still has a ,.

HTML:

<input type="text" #elem (keypress)="clearInput($event)">

Code:

@ViewChild( 'elem' ) public element;

clearInput( e: KeyboardEvent ) 
 if ( e.keyCode === 44 ) 
 this.element.nativeElement.value = '';
 else 
 console.log('Not a comma');
 

I'm using Angular 6.

Add preventDefault.

Add preventDefault() in your clearInput code as shown below:

clearInput(e: KeyboardEvent) 
 if (e.keyCode === 44) 
 e.preventDefault(); // <-- Here
 this.element.nativeElement.value = '';
 else 
 console.log('Not a comma');
 

Read more about preventDefault here.

Simply return false if a comma is pressed:

class HomeComponent 
 @ViewChild('elem') public element;
 clearInput(e: KeyboardEvent) 
 if (e.keyCode === 44) 
 this.element.nativeElement.value = '';
 return false;
 else 
 console.log('Not a comma');
 
 

JSFiddle: https://jsfiddle.net/lucakiebel/zrehcwfy/1/

You need to do 2 minor changes:

1. Use keyup event to get the latest key typed and include in the value of input
   


2. Use e.key === ',' in the if condition

Here is the working JSFIDDLE