Mixing
Keyup prevent default not working angular6
0
I want to stop entering any number after validating a custom regular expression , the issue is condition got true but event.preventDefault is not preventing the input , The reg ex is to input value in percentage between 1-100 with decimals
/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/
this is my input
<input type='text' (keyup)="preventPercentage($event)" [(ngModel)]="value">
ts
preventPercentage(event){
var p = event.target.value
var s= p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null
if(!s && p){
event.preventDefault();
}
}
user can still enter any value even the condition is true
input anything between 100 above it still working and event is not preventing values
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
I used key down but it allows to enter 123 i.e three digit numbers
and I cannot then remove that number using backspace what exactly I am doing wrong can anyone suggest a sol any help will be appreciated
javascript angular6 keydown keyup
edited Nov 20 '18 at 6:50
Foo
1
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
add a comment |
0
I want to stop entering any number after validating a custom regular expression , the issue is condition got true but event.preventDefault is not preventing the input , The reg ex is to input value in percentage between 1-100 with decimals
/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/
this is my input
<input type='text' (keyup)="preventPercentage($event)" [(ngModel)]="value">
ts
preventPercentage(event){
var p = event.target.value
var s= p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null
if(!s && p){
event.preventDefault();
}
}
user can still enter any value even the condition is true
input anything between 100 above it still working and event is not preventing values
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
I used key down but it allows to enter 123 i.e three digit numbers
and I cannot then remove that number using backspace what exactly I am doing wrong can anyone suggest a sol any help will be appreciated
javascript angular6 keydown keyup
edited Nov 20 '18 at 6:50
Foo
1
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
Just a wild card. Add event.stopPropagation() and return false.
– Edwin Dijas Chiwona
Nov 20 '18 at 6:54
@EdwinDijasChiwona not working
– Kumail Hussain
Nov 20 '18 at 7:03
Use all three. event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
– Edwin Dijas Chiwona
Nov 20 '18 at 7:10
add a comment |
0
0
0
1
I want to stop entering any number after validating a custom regular expression , the issue is condition got true but event.preventDefault is not preventing the input , The reg ex is to input value in percentage between 1-100 with decimals
/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/
this is my input
<input type='text' (keyup)="preventPercentage($event)" [(ngModel)]="value">
ts
preventPercentage(event){
var p = event.target.value
var s= p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null
if(!s && p){
event.preventDefault();
}
}
user can still enter any value even the condition is true
input anything between 100 above it still working and event is not preventing values
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
I used key down but it allows to enter 123 i.e three digit numbers
and I cannot then remove that number using backspace what exactly I am doing wrong can anyone suggest a sol any help will be appreciated
javascript angular6 keydown keyup
edited Nov 20 '18 at 6:50
Foo
1
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
I want to stop entering any number after validating a custom regular expression , the issue is condition got true but event.preventDefault is not preventing the input , The reg ex is to input value in percentage between 1-100 with decimals
/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/
this is my input
<input type='text' (keyup)="preventPercentage($event)" [(ngModel)]="value">
ts
preventPercentage(event){
var p = event.target.value
var s= p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null
if(!s && p){
event.preventDefault();
}
}
user can still enter any value even the condition is true
input anything between 100 above it still working and event is not preventing values
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
I used key down but it allows to enter 123 i.e three digit numbers
and I cannot then remove that number using backspace what exactly I am doing wrong can anyone suggest a sol any help will be appreciated
javascript angular6 keydown keyup
javascript angular6 keydown keyup
edited Nov 20 '18 at 6:50
Foo
1
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
edited Nov 20 '18 at 6:50
Foo
1
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
edited Nov 20 '18 at 6:50
Foo
1
edited Nov 20 '18 at 6:50
Foo
1
edited Nov 20 '18 at 6:50
Foo
1
1
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
asked Nov 20 '18 at 6:24
Kumail HussainKumail Hussain
350624
350624
Just a wild card. Add event.stopPropagation() and return false.
– Edwin Dijas Chiwona
Nov 20 '18 at 6:54
@EdwinDijasChiwona not working
– Kumail Hussain
Nov 20 '18 at 7:03
Use all three. event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
– Edwin Dijas Chiwona
Nov 20 '18 at 7:10
add a comment |
Just a wild card. Add event.stopPropagation() and return false.
– Edwin Dijas Chiwona
Nov 20 '18 at 6:54
@EdwinDijasChiwona not working
– Kumail Hussain
Nov 20 '18 at 7:03
Use all three. event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
– Edwin Dijas Chiwona
Nov 20 '18 at 7:10
Just a wild card. Add event.stopPropagation() and return false.
– Edwin Dijas Chiwona
Nov 20 '18 at 6:54
Just a wild card. Add event.stopPropagation() and return false.
– Edwin Dijas Chiwona
Nov 20 '18 at 6:54
@EdwinDijasChiwona not working
– Kumail Hussain
Nov 20 '18 at 7:03
@EdwinDijasChiwona not working
– Kumail Hussain
Nov 20 '18 at 7:03
Use all three. event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
– Edwin Dijas Chiwona
Nov 20 '18 at 7:10
Use all three. event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
– Edwin Dijas Chiwona
Nov 20 '18 at 7:10
add a comment |
2 Answers
2
active
oldest
votes
0
Try this. I think there is a change required in the regex as per your requirement.
preventPercentage(event){
var p = event.target.value + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 8) {
event.stopPropagation();
return false;
}
}
Use this with keydown:
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
add a comment |
0
preventPercentage(event: any) {
function stopProgram() {
event.stopPropagation();
return false;
}
if (event.keyCode === 8) {
return true;
}
var p = event.target.value;
if ((event.keyCode === 190 && p.indexOf('.') > -1) || p === '100') {
return stopProgram();
}
p = p + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 190) {
return stopProgram();
}
}
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
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',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387359%2fkeyup-prevent-default-not-working-angular6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this. I think there is a change required in the regex as per your requirement.
preventPercentage(event){
var p = event.target.value + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 8) {
event.stopPropagation();
return false;
}
}
Use this with keydown:
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
add a comment |
0
Try this. I think there is a change required in the regex as per your requirement.
preventPercentage(event){
var p = event.target.value + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 8) {
event.stopPropagation();
return false;
}
}
Use this with keydown:
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
add a comment |
0
0
0
Try this. I think there is a change required in the regex as per your requirement.
preventPercentage(event){
var p = event.target.value + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 8) {
event.stopPropagation();
return false;
}
}
Use this with keydown:
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
Try this. I think there is a change required in the regex as per your requirement.
preventPercentage(event){
var p = event.target.value + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 8) {
event.stopPropagation();
return false;
}
}
Use this with keydown:
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
edited Nov 20 '18 at 7:43
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
answered Nov 20 '18 at 7:12
Lovlesh PokraLovlesh Pokra
1063
1063
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
add a comment |
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
not working, comparing with event key only is invalid
– Kumail Hussain
Nov 20 '18 at 7:28
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
I have updated with some changes in script, I think this regex is not working in angular as expected
– Lovlesh Pokra
Nov 20 '18 at 7:44
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
not getting up the decimals value
– Kumail Hussain
Nov 20 '18 at 9:01
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
@KumailHussain please check another answer that I have posted, there was a problem with regex execution as I was telling you from starting. I've updated it.
– Lovlesh Pokra
Nov 20 '18 at 10:41
add a comment |
0
preventPercentage(event: any) {
function stopProgram() {
event.stopPropagation();
return false;
}
if (event.keyCode === 8) {
return true;
}
var p = event.target.value;
if ((event.keyCode === 190 && p.indexOf('.') > -1) || p === '100') {
return stopProgram();
}
p = p + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 190) {
return stopProgram();
}
}
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
add a comment |
0
preventPercentage(event: any) {
function stopProgram() {
event.stopPropagation();
return false;
}
if (event.keyCode === 8) {
return true;
}
var p = event.target.value;
if ((event.keyCode === 190 && p.indexOf('.') > -1) || p === '100') {
return stopProgram();
}
p = p + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 190) {
return stopProgram();
}
}
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
add a comment |
0
0
0
preventPercentage(event: any) {
function stopProgram() {
event.stopPropagation();
return false;
}
if (event.keyCode === 8) {
return true;
}
var p = event.target.value;
if ((event.keyCode === 190 && p.indexOf('.') > -1) || p === '100') {
return stopProgram();
}
p = p + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 190) {
return stopProgram();
}
}
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
preventPercentage(event: any) {
function stopProgram() {
event.stopPropagation();
return false;
}
if (event.keyCode === 8) {
return true;
}
var p = event.target.value;
if ((event.keyCode === 190 && p.indexOf('.') > -1) || p === '100') {
return stopProgram();
}
p = p + event.key;
var s = p.match(/^(100(.0{1,2})?|[1-9]?d(.d{1,2})?)$/) != null;
if (!s && event.keyCode !== 190) {
return stopProgram();
}
}
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
answered Nov 20 '18 at 10:40
Lovlesh PokraLovlesh Pokra
1063
1063
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387359%2fkeyup-prevent-default-not-working-angular6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just a wild card. Add event.stopPropagation() and return false.
– Edwin Dijas Chiwona
Nov 20 '18 at 6:54
@EdwinDijasChiwona not working
– Kumail Hussain
Nov 20 '18 at 7:03
Use all three. event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
– Edwin Dijas Chiwona
Nov 20 '18 at 7:10