758
Views
14
Comments
How to restrict text in Text input field and allow user to enter only numbers
Question
Application Type
Reactive

HI team,

How to restrict Text in Text input field using javascript. i have tried this 

$(function() {    $("$parameters.WidgestName").dxTextBox({        maxLength: 10,        setAttribute:typeof(Number)    });});

it was not working could you please help me on this.


Thanks,

Akash.

Pic 1.PNG
2024-01-31 05-29-41
Akshay Deshpande

Hello Akash,

Please try this : Regax method 

https://www.outsystems.com/forums/discussion/78790/allow-user-only-put-numbers-on-input-widget/

Let me know, if this works for you

Thanks and Regards,
Akshay Deshpande

2022-11-17 07-00-53
Akash Gunupudi

thanks for the reply Akshay i will try now

2022-11-17 07-00-53
Akash Gunupudi

Applied its not working 

2024-01-31 05-29-41
Akshay Deshpande

Hey Akash,
It is possible to used forge component 
If yes used this : Input Mask react

I have attached the Demo Link and OML for your reference
Note : In that go with the mask text


Thanks and Regards,
Akshay Deshpande

ABC.oml
2023-04-16 15-25-31
Krishnanand Pathak
2023-02-19 05-11-08
Faais

Hi Akash Gunupudi,

You can use the slice method in javascript.

var input = document.getElementById($parameters.WidgestName);

inputId.value = inputId.value.slice(0, 10);


or 

Write this code in Onready's JavaScript node

var input = document.getElementById($parameters.WidgestName);

input.addEventListener("input", function() {

input.value = input.value.slice(0, 10);

})




UserImage.jpg
Dinesh Kumar

Hello Akash,

Kindly use this in javascript and use this during oninput of your input box.

var inputid= document.activeElement.id;

document.getElementById(inputid).value =document.getElementById(inputid).value

         .replace(/[^0-9]/gi,'');


This will help you in real-time.


Regards,

Dinesh Kumar.

2023-12-14 09-56-57
Yogesh Javir

Hey,

Create KeyPress event for input and inside keypress event  use javascript like below.

function ABC(txt,event){

var a=event.keycode||event.which;

if(a>47 && a<58){

//If pressed key is number then it will allow

return true;

}else{

//If pressed key is not number then it will not allow to press key

event.preventDefault();

}

return true;

}

return ABC($parameter.widgetId,event);


Hope this will help you.

Thanks

Yogesh

2025-04-30 07-30-15
Sanjay Bankar

Thank @Yogesh Javir it worked for me.

2024-12-10 04-40-04
Gitansh Anand

Hi @Akash Gunupudi, As @Krishnanand Pathak already suggested, you can use Restrict Characters, our forge component. You can check the demo to see that it works and its documentation to see how easy it is to use.
To test the demo, just add '0-9' in the input labeled Regular Expression without the quotation marks, and in the input labeled Input you can see that you can only type integers.

Thanks
Gitansh Anand

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

You can do that by preventing those keys which you don't want, I have created a sample for you let me know if this helps you.

https://personal-ejuytnht.outsystemscloud.com/RandomName/NumberInput

I hope this helps.

Thanks & Regards
Tousif Khan

Numbers Only Sample.oml
2025-03-19 07-39-30
Rifaz

Hi Akash,

Kindly use this below JS in Oninput event handler of the input box.

var inputid = document.activeElement.id;

document.getElementById(inputid).value = document.getElementById(inputid).value.replace(/[^\d]/g, '');

You can't find oninput event in the list, You need to type on it.

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