347
Views
14
Comments
Solved
Number input type is taking special characters and text as input
Question
Application Type
Reactive

Hello team,

I have one number input field in form. It is taking e, E and + .

Other characters and special character is not taking.

what should we do so that user cant enter e, E and +

 ?


2023-08-28 07-00-10
Paulo Torres
Champion
Solution

For me this solution works, anyway when I remove the script in fact we can insert e and + even when we put pattern.


I found this explanation:

Because that's exactly how the spec says it should work. The number input can accept floating-point numbers, including negative symbols and the e or E character (where the exponent is the number after the e or E):

A floating-point number consists of the following parts, in exactly the following order:Optionally, the first character may be a "-" character.One or more characters in the range "0—9".Optionally, the following parts, in exactly the following order:a "." characterone or more characters in the range "0—9"Optionally, the following parts, in exactly the following order:a "e" character or "E" characteroptionally, a "-" character or "+" characterOne or more characters in the range "0—9".


Anyway I created a simple JS for you just to avoid these two keys and it works, check the oml and let me know if works for you.

Regards

OnlyNumber.oml
2023-10-21 19-42-11
Tousif Khan
Champion

Hello

You can refer to the Solution here.

You need to do that by using Regex Pattern to restrict user to input only number.

Let me know if this will help

Thanks

Tousif


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Nayan,

Note that the reason for e/E and + (and -) to be allowed is for scientific notation of numbers, e.g. 1.23e+01. So it's not just some random characters that are allowed.

2023-08-28 07-00-10
Paulo Torres
Champion

You can achive this with JS to prevent letters etc.

Put this on your OnReady:

function isControlKeyCode(keyCode) {

    var backspace = 8, tab = 9, enter = 13, shift = 16, ctrl = 17, alt = 18, pauseBreak = 19, capsLock = 20, escape = 27, space = 32, pageUp = 33, pageDown = 34, end = 35, home = 36, leftArrow = 37, upArrow = 38, rightArrow = 39, downArrow = 40, insert = 45, del = 46;

    var arrControlKeys = [ backspace, tab, enter, shift, ctrl, alt, pauseBreak, capsLock, escape, pageUp, pageDown, end, home, leftArrow, upArrow, rightArrow, downArrow, insert, del ];

    return arrControlKeys.indexOf(keyCode) > -1;

}


function restrictCharacter(regExPermitedCharacters, event) {

    var ok = true;

    var key = event.charCode || event.keyCode;

    if (!isControlKeyCode(key)) {

        ok = regExPermitedCharacters.test(String.fromCharCode(key));

    }

    if (!ok && !event.ctrlKey) {

        event.preventDefault();

        return false;

    }

}


var pattern = /^-?[0-9]+$/;


document.getElementById($parameters.WidgetId).addEventListener("keypress", function(e){

    restrictCharacter(new RegExp(pattern), e);

});

2024-04-30 10-44-32
Nayana Chaudhari

Not working

2023-08-28 07-00-10
Paulo Torres
Champion


Share your oml, I'm using this JS in several places.

2024-04-30 10-44-32
Nayana Chaudhari

I can't share oml. It is confidential. Can you share sample oml?

2023-08-28 07-00-10
Paulo Torres
Champion


All OML are confidential... You can share simple OML with you approach or send screenshots

2024-04-30 10-44-32
Nayana Chaudhari
OnlyNumber.oml
2023-08-28 07-00-10
Paulo Torres
Champion
Solution

For me this solution works, anyway when I remove the script in fact we can insert e and + even when we put pattern.


I found this explanation:

Because that's exactly how the spec says it should work. The number input can accept floating-point numbers, including negative symbols and the e or E character (where the exponent is the number after the e or E):

A floating-point number consists of the following parts, in exactly the following order:Optionally, the first character may be a "-" character.One or more characters in the range "0—9".Optionally, the following parts, in exactly the following order:a "." characterone or more characters in the range "0—9"Optionally, the following parts, in exactly the following order:a "e" character or "E" characteroptionally, a "-" character or "+" characterOne or more characters in the range "0—9".


Anyway I created a simple JS for you just to avoid these two keys and it works, check the oml and let me know if works for you.

Regards

OnlyNumber.oml
2024-04-30 10-44-32
Nayana Chaudhari
2023-08-28 07-00-10
Paulo Torres
Champion
2021-03-01 12-05-47
Narendra Bhangale

Hi @Nayana Sonawane,

You can restrict input to accept only numbers by setting input attribute as:

property: pattern 

value: "[0-9]*"

It's working fine for me.


Regards,

Narendra Bhangale.

2024-04-30 10-44-32
Nayana Chaudhari

Tried your solution. It is still taking e and + 

2021-03-01 12-05-47
Narendra Bhangale

To restrict such inputs I called JavaScript on focus event of number input.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.