Styjun

Could a 19.25mm revolver actually exist?

Convert Byte array into collection of items of different types

How to patch glass cuts in a bicycle tire?

Parallel fifths in the orchestra

Why does this if-statement combining assignment and an equality check return true?

Does this strict reading of the rules allow both Extra Attack and the Thirsting Blade warlock invocation to be used together?

Where have Brexit voters gone?

Question in discrete mathematics about group permutations

How to respond to upset student?

Is there a simple example that empirical evidence is misleading?

Apt - strange requests to d16r8ew072anqo.cloudfront.net:80

What is a Power on Reset IC?

Can a US state pass/enforce a law stating that a group of people owe money to the state government?

How to politely tell someone they did not hit "reply to all" in an email?

Make 24 using exactly three 3s

Can I tell a prospective employee that everyone in the team is leaving?

Is this statement about cut time correct?

Best material to absorb as much light as possible

Is it possible to remotely hack the GPS system and disable GPS service worldwide?

Need to read my home electrical meter

Can a British citizen living in France vote in both France and Britain in the European Elections?

First Match - awk

In the 3D Zeldas, is it faster to roll or to simply walk?

The art of clickbait captions

Restricting user to input special-characters using Angular

How to restrict special characters in the input field using angular2/ typescriptHow do you disable browser Autocomplete on web form field / input tag?<button> vs. <input type=“button” />. Which to use?Restrict text box to start with a particular characterHow to restrict characters entered into a textbox using jQueryIs it possible to apply CSS to half of a character?NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackRestrict Special Characters in HTML & AngularJsHow to restrict Special character in material inputAngular 6 restrict certain alphabetsHow to put a proper error message while entering any alphabet or special character in <input matInput type=“number”>?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

User is allowed to enter all the alphabets and numbers but when the special-characters are entered then it shouldn't be entered in the the text box.

I tried doing this using (ng-pattern-restrict) but it's not working as expected, I think it might be possible that it needs to be imported in
app-module.ts but not working.

HTML FILE

html angular npm

share|improve this question

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it is an AngularJS package
  
  – Akber Iqbal
  Mar 24 at 2:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of stackoverflow.com/questions/45072369/…
  
  – Maniraj from Karur
  Mar 24 at 4:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think rather than restricting user from entering special chars , won't it be good to let them type but invalidate the field & form ?? From user experience perspective, its better rather than disabling keypress events . Disabling special chars key press events might force the user to think that "my keyboard has broken keys"
  
  – Shashank Vivek
  Mar 24 at 4:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ManirajfromKarur it's not duplicate of that query,@Shashankvivek what I'm asking is that I don't want user to let key press and input in the text area instead of showing some error or warning to him.
  
  – Saurabh Kumar
  Mar 25 at 5:34
  

  
  
  
  

add a comment | 

2

User is allowed to enter all the alphabets and numbers but when the special-characters are entered then it shouldn't be entered in the the text box.

I tried doing this using (ng-pattern-restrict) but it's not working as expected, I think it might be possible that it needs to be imported in
app-module.ts but not working.

HTML FILE

html angular npm

share|improve this question

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it is an AngularJS package
  
  – Akber Iqbal
  Mar 24 at 2:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of stackoverflow.com/questions/45072369/…
  
  – Maniraj from Karur
  Mar 24 at 4:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think rather than restricting user from entering special chars , won't it be good to let them type but invalidate the field & form ?? From user experience perspective, its better rather than disabling keypress events . Disabling special chars key press events might force the user to think that "my keyboard has broken keys"
  
  – Shashank Vivek
  Mar 24 at 4:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ManirajfromKarur it's not duplicate of that query,@Shashankvivek what I'm asking is that I don't want user to let key press and input in the text area instead of showing some error or warning to him.
  
  – Saurabh Kumar
  Mar 25 at 5:34
  

  
  
  
  

add a comment | 

User is allowed to enter all the alphabets and numbers but when the special-characters are entered then it shouldn't be entered in the the text box.

I tried doing this using (ng-pattern-restrict) but it's not working as expected, I think it might be possible that it needs to be imported in
app-module.ts but not working.

HTML FILE

html angular npm

share|improve this question

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

html angular npm

html angular npm

share|improve this question

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

share|improve this question

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

asked Mar 24 at 2:27

Saurabh KumarSaurabh Kumar

175

2 Answers
2

active

oldest

votes

1

This may help you, by making service and data-binding approach in angular.

Hello.service.ts

public restrictNumeric(e) e.ctrlKey) 
 return true;

if (e.which === 32) 
 return false;

if (e.which === 0) 
 return true;

if (e.which < 33) 
 return true;

input = String.fromCharCode(e.which);
return !!/[ds]/.test(input);

Hello.html

 <input type="tel" (keypress)="restrictNumeric($event)">

share|improve this answer

edited Mar 26 at 13:39

Saurabh Kumar

175

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for the perfect approach for the question and this really worked @AkashSinghSengar.
  
  – Saurabh Kumar
  Mar 26 at 13:35
  

  
  
  
  

add a comment | 

0

@Shashank has a valid point of view. What you want to do is disable the entry of special characters from the backend, as well as render the field invalid from the frontend. A hacker knowing what they're doing would easily manipulate the HTTP Request itself rather than the field, making it pretty vulnerable.

However, if you insist on your solution, I would recommend using RegEx. This sample expression might come in handy. That way, whenever the input field detects one of these special characters, it would replace that character with a ''

share|improve this answer

answered Mar 24 at 7:25

ChrisChris

328115

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  BTW Thanks Chris for a good suggestion, I really appreciate your approach towards my query. :)
  
  – Saurabh Kumar
  Mar 27 at 8:56
  

  
  
  
  

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55320225%2frestricting-user-to-input-special-characters-using-angular%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

This may help you, by making service and data-binding approach in angular.

Hello.service.ts

public restrictNumeric(e) e.ctrlKey) 
 return true;

if (e.which === 32) 
 return false;

if (e.which === 0) 
 return true;

if (e.which < 33) 
 return true;

input = String.fromCharCode(e.which);
return !!/[ds]/.test(input);

Hello.html

 <input type="tel" (keypress)="restrictNumeric($event)">

share|improve this answer

edited Mar 26 at 13:39

Saurabh Kumar

175

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for the perfect approach for the question and this really worked @AkashSinghSengar.
  
  – Saurabh Kumar
  Mar 26 at 13:35
  

  
  
  
  

add a comment | 

1

This may help you, by making service and data-binding approach in angular.

Hello.service.ts

public restrictNumeric(e) e.ctrlKey) 
 return true;

if (e.which === 32) 
 return false;

if (e.which === 0) 
 return true;

if (e.which < 33) 
 return true;

input = String.fromCharCode(e.which);
return !!/[ds]/.test(input);

Hello.html

 <input type="tel" (keypress)="restrictNumeric($event)">

share|improve this answer

edited Mar 26 at 13:39

Saurabh Kumar

175

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thanks for the perfect approach for the question and this really worked @AkashSinghSengar.
  
  – Saurabh Kumar
  Mar 26 at 13:35
  

  
  
  
  

add a comment | 

This may help you, by making service and data-binding approach in angular.

Hello.service.ts

public restrictNumeric(e) e.ctrlKey) 
 return true;

if (e.which === 32) 
 return false;

if (e.which === 0) 
 return true;

if (e.which < 33) 
 return true;

input = String.fromCharCode(e.which);
return !!/[ds]/.test(input);

Hello.html

 <input type="tel" (keypress)="restrictNumeric($event)">

share|improve this answer

edited Mar 26 at 13:39

Saurabh Kumar

175

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

public restrictNumeric(e) e.ctrlKey) 
 return true;

if (e.which === 32) 
 return false;

if (e.which === 0) 
 return true;

if (e.which < 33) 
 return true;

input = String.fromCharCode(e.which);
return !!/[ds]/.test(input);

 <input type="tel" (keypress)="restrictNumeric($event)">

share|improve this answer

edited Mar 26 at 13:39

Saurabh Kumar

175

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

edited Mar 26 at 13:39

Saurabh Kumar

175

edited Mar 26 at 13:39

Saurabh Kumar

175

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

answered Mar 26 at 13:33

Akash Singh SengarAkash Singh Sengar

156622

0

@Shashank has a valid point of view. What you want to do is disable the entry of special characters from the backend, as well as render the field invalid from the frontend. A hacker knowing what they're doing would easily manipulate the HTTP Request itself rather than the field, making it pretty vulnerable.

However, if you insist on your solution, I would recommend using RegEx. This sample expression might come in handy. That way, whenever the input field detects one of these special characters, it would replace that character with a ''

share|improve this answer

answered Mar 24 at 7:25

ChrisChris

328115

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  BTW Thanks Chris for a good suggestion, I really appreciate your approach towards my query. :)
  
  – Saurabh Kumar
  Mar 27 at 8:56
  

  
  
  
  

add a comment | 

0

@Shashank has a valid point of view. What you want to do is disable the entry of special characters from the backend, as well as render the field invalid from the frontend. A hacker knowing what they're doing would easily manipulate the HTTP Request itself rather than the field, making it pretty vulnerable.

However, if you insist on your solution, I would recommend using RegEx. This sample expression might come in handy. That way, whenever the input field detects one of these special characters, it would replace that character with a ''

share|improve this answer

answered Mar 24 at 7:25

ChrisChris

328115

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  BTW Thanks Chris for a good suggestion, I really appreciate your approach towards my query. :)
  
  – Saurabh Kumar
  Mar 27 at 8:56
  

  
  
  
  

add a comment | 

@Shashank has a valid point of view. What you want to do is disable the entry of special characters from the backend, as well as render the field invalid from the frontend. A hacker knowing what they're doing would easily manipulate the HTTP Request itself rather than the field, making it pretty vulnerable.

However, if you insist on your solution, I would recommend using RegEx. This sample expression might come in handy. That way, whenever the input field detects one of these special characters, it would replace that character with a ''

share|improve this answer

answered Mar 24 at 7:25

ChrisChris

328115

share|improve this answer

answered Mar 24 at 7:25

ChrisChris

328115

answered Mar 24 at 7:25

ChrisChris

328115

answered Mar 24 at 7:25

ChrisChris

328115