Clearing an input on comma press doesn't clear the comma

up vote
19
down vote

favorite

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:

Type in abc.

Type ,

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.

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

asked Aug 8 at 10:46

user3607282

94221130

add a commentÂ |Â

up vote
19
down vote

favorite

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:

Type in abc.

Type ,

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.

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

asked Aug 8 at 10:46

user3607282

94221130

add a commentÂ |Â

up vote
19
down vote

favorite

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:

Type in abc.

Type ,

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.

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

asked Aug 8 at 10:46

user3607282

94221130

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:

Type in abc.

Type ,

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.

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

asked Aug 8 at 10:46

user3607282

94221130

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

edited Aug 8 at 12:30

Vadim Kotov

4,08353047

asked Aug 8 at 10:46

user3607282

94221130

asked Aug 8 at 10:46

user3607282

94221130

asked Aug 8 at 10:46

user3607282

94221130

add a commentÂ |Â

3 Answers
3

active

oldest

votes

up vote
11
down vote

accepted

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.

edited Aug 9 at 12:44

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

5

You could add some explanation: The insertion of the comma will be triggered by the same "keyup" event as your code. But the Browser has to run your code first, since your listener is not passive (it might preventDefault() or return false) - so the keypress event will run your listener first (clear the field) and then the default listener (inserting a comma into the empty field). So other solutions would be keyUp or marking your listener passive. - But preventDefault() is most idiomatic for your case.
â€“Â Falco
Aug 8 at 14:12

add a commentÂ |Â

up vote
7
down vote

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/

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

add a commentÂ |Â

up vote
0
down vote

You need to do 2 minor changes:

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

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

Here is the working JSFIDDLE

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51744747%2fclearing-an-input-on-comma-press-doesnt-clear-the-comma%23new-answer', 'question_page');

);

Post as a guest

Name

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
11
down vote

accepted

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.

edited Aug 9 at 12:44

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

5

You could add some explanation: The insertion of the comma will be triggered by the same "keyup" event as your code. But the Browser has to run your code first, since your listener is not passive (it might preventDefault() or return false) - so the keypress event will run your listener first (clear the field) and then the default listener (inserting a comma into the empty field). So other solutions would be keyUp or marking your listener passive. - But preventDefault() is most idiomatic for your case.
â€“Â Falco
Aug 8 at 14:12

add a commentÂ |Â

up vote
11
down vote

accepted

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.

edited Aug 9 at 12:44

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

5

You could add some explanation: The insertion of the comma will be triggered by the same "keyup" event as your code. But the Browser has to run your code first, since your listener is not passive (it might preventDefault() or return false) - so the keypress event will run your listener first (clear the field) and then the default listener (inserting a comma into the empty field). So other solutions would be keyUp or marking your listener passive. - But preventDefault() is most idiomatic for your case.
â€“Â Falco
Aug 8 at 14:12

add a commentÂ |Â

up vote
11
down vote

accepted

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.

edited Aug 9 at 12:44

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

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.

edited Aug 9 at 12:44

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

edited Aug 9 at 12:44

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

answered Aug 8 at 10:54

UtkarshPramodGupta

1,5631825

5

You could add some explanation: The insertion of the comma will be triggered by the same "keyup" event as your code. But the Browser has to run your code first, since your listener is not passive (it might preventDefault() or return false) - so the keypress event will run your listener first (clear the field) and then the default listener (inserting a comma into the empty field). So other solutions would be keyUp or marking your listener passive. - But preventDefault() is most idiomatic for your case.
â€“Â Falco
Aug 8 at 14:12

add a commentÂ |Â

5

You could add some explanation: The insertion of the comma will be triggered by the same "keyup" event as your code. But the Browser has to run your code first, since your listener is not passive (it might preventDefault() or return false) - so the keypress event will run your listener first (clear the field) and then the default listener (inserting a comma into the empty field). So other solutions would be keyUp or marking your listener passive. - But preventDefault() is most idiomatic for your case.
â€“Â Falco
Aug 8 at 14:12

You could add some explanation: The insertion of the comma will be triggered by the same "keyup" event as your code. But the Browser has to run your code first, since your listener is not passive (it might preventDefault() or return false) - so the keypress event will run your listener first (clear the field) and then the default listener (inserting a comma into the empty field). So other solutions would be keyUp or marking your listener passive. - But preventDefault() is most idiomatic for your case.
â€“Â Falco
Aug 8 at 14:12

add a commentÂ |Â

up vote
7
down vote

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/

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

add a commentÂ |Â

up vote
7
down vote

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/

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

add a commentÂ |Â

up vote
7
down vote

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/

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

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/

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

answered Aug 8 at 10:48

Luca Kiebel

5,87031231

add a commentÂ |Â

up vote
0
down vote

You need to do 2 minor changes:

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

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

Here is the working JSFIDDLE

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

add a commentÂ |Â

up vote
0
down vote

You need to do 2 minor changes:

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

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

Here is the working JSFIDDLE

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

add a commentÂ |Â

up vote
0
down vote

You need to do 2 minor changes:

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

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

Here is the working JSFIDDLE

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

You need to do 2 minor changes:

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

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

Here is the working JSFIDDLE

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

answered Aug 8 at 10:50

Ankit Agarwal

20.1k31740

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky