I would like to restrict user input to text characters only. I have attempted several approaches, including using the OnChange event with JavaScript, applying a pattern in the Extended Properties, and implementing a Forge component called “Restrict Char.” While the Forge solution works correctly when I have an internet connection, it produces an error when the application is offline. I need a solution that functions properly in both online and offline modes. Could you please suggest an appropriate approach to resolve this issue?
Hello Benedict,
Hope you're doing well.
Most likely, the Forge solution produces an error when the application is offline because you're calling a Server Action. If you need a solution that works for both online and offline modes, you'll need to implement this client-side.
For this use case, I'd like to suggest this component: https://www.outsystems.com/forge/component-overview/7838/input-mask-react-o11
It works fully client-side.
You can use the MaskText widget, bind it to your input id and pass something like "a{*}" in the MaskPattern property. This will allow only alphabetic characters (both uppercase and lowercase).
Let me know if it works for you!
Kind regards,
Rui Barradas
I will try it sir thank you
I am using these configs:
You can test it here:
https://rbarradas.outsystemscloud.com/TestInput/TestScreen
Hi @Benedict cruz ,
You can add this Javascript directly to the OnChange event of the input widget. I have tested it and it works properly in the mobile application, including offline mode.
var input = document.getElementById($parameters.InputName);
if(input){
input.addEventListener("input", function () {
this.value = this.value.replace(/[^a-zA-Z ]/g, '');
});
}
Hi @Benedict cruz
You can call the below JavaScript code on the OnChange event of your textbox.
var value = $parameters.UserName;value = value.replace(/[^a-zA-Z\s]/g, '');$parameters.UserName = value;