86
Views
11
Comments
[OTP-Separated] I want to enter only integer and should not allow Text
otp-separated
Reactive icon
Forge asset by Zafar Sultan
Application Type
Reactive

I want the users to enter only integer and not allow the users to enter text values 

i have given numbers only to true but even then it allows text 
To be clear it works fine in web and when i use  "open in browser"  but when used in mobile it allows text value. 

2022-01-13 11-06-04
Neha Sheikh
Champion

Hello,

I have not used the forge component. But to allow only numbers in a particular widget you can use javascript to enter only numbers.


Thanks,

Neha

2022-11-15 12-05-50
Zafar Sultan

Hi @Srinivas Prasad 

Can you please provide more details(browser, component version etc.)? If you check the demo at https://personal-wo7b2dhk.outsystemscloud.com/OTPSeparatedInputDemo/SingleOTP it works fine for "numeric" only flag. Is there something else I am missing here?

UserImage.jpg
Srinivas Prasad

Hi sir i am usng our component for mobile app otp purpose 
In which i have used "BlockOTPInput" and given the number only field to true 

but even then it accepts text values 
But it works fine with web and when i use my app in "open in browser"  but when used in mobile it allows text value. 
I believe You got it  .

2022-11-15 12-05-50
Zafar Sultan

Unfortunately the component only supports reactive web applications for now. Its mobile version is planned but I believe it will not be out very soon. Let me check if I can make some tweaks to it to make it mobile compatible.

2022-11-15 12-05-50
Zafar Sultan

Hi @Srinivas Prasad 

I have uploaded a mobile version of this forge component. Please visit https://www.outsystems.com/forge/component-overview/18000/otp-seperated-mobile to try it against your requirement and let me know if it solves your issue.

Regards,

UserImage.jpg
Srinivas Prasad

Hi @Zafar Sultan sir Sorry for the late reply 
I have used Your new Forge component OTP Separated mobile and it works fine with mobiles if i give numeric only to  it is accepting only integer and the plugin is working fine.

I have only one small problem now I want the keyboard also to be integer only 

currently the keyboard comes as an default keyboard ie; both variables and all keys which is given below .

But I want the keyboard to display only numeric ie: only numbers like below

Can you provide a solution to this .


Thanks in advance.

2023-11-20 06-53-17
Neha Rathore

Hi Srinivas,

Please find attach OML. I also made the same changes and it is working at my end.

If possible please share OML we can help you.

Thanks

OTPTest.oml
2023-04-17 05-19-55
Vaishali Shrivastava

Hi @Srinivas Prasad,


You can set the input field's property "Input Type" to a number (if the data type of your attribute is an integer). If this is done, the user will only be able to enter numbers. 


Hope this will help you.


2024-09-17 08-54-53
Jerome Rajadurai J

Hi @Srinivas Prasad ,


I think you are facing issues with the deprecated 'event' based code in the component.

So disable the JS node in the Input_OTPCharacterOnKeypress action of the block IndividualInput in the component and add a OnReady function with below JS Code. 


Js Code:

document.getElementById($parameters.WidgetId).addEventListener("keydown", (event) => { if (event.key != "ArrowLeft" && event.key != "ArrowRight" && event.key != "Backspace") {    var currentIndex = $parameters.InputIndex;    var currentElement = document.querySelector("[data-index='" + currentIndex + "']");     var regex = /^[a-z0-9]+$/i;     if($parameters.NumbersOnly)        regex = /^[0-9]+$/i;         if (!regex.test(event.key)){        event.preventDefault();    }    else{    if (currentElement.value !== '')        currentElement.value = '';    }}  })


UserImage.jpg
Srinivas Prasad

I have tried this but this but not working

2024-09-17 08-54-53
Jerome Rajadurai J

Hi @Srinivas Prasad ,

Thanks for the reply.

Then it must be something else which needs a very minor modification. Can you please share the OML(Sample) with necessary browser console logs. Thank You.

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