Hi
I have a number input and I want to restrict its lenght to 8, so I created OnReady action with a javascript to do that. But the OnChange event for this input is not working now because of the javascript I have added.
Any help please?
Thank you
Hi Sultan,
Rather than relying on JavaScript in the OnReady action for input validation, you can use the Input Mask Forge component to apply the necessary validation directly to your input fields. This approach not only simplifies your implementation but also ensures there are no conflicts with onchange events or other client-side interactions.
URL - https://www.outsystems.com/forge/component-overview/7819/input-mask-reactive-o11
Additionally, I have modified the OML file to incorporate the changes, and I've attached it for your reference.
This is working fine
Thanks alot
but I am still looking for a javascript solution if it is possible
Hi @Sultan Alnaabi,
Please use below javascript:
document.getElementById("Input_TextVar").addEventListener("input", function() {
var inputElement = document.getElementById("Input_TextVar");
// Restrict input length to 8 characters
if (inputElement.value.length > $parameters.MaxLength) {
inputElement.value = inputElement.value.slice(0, $parameters.MaxLength);
}
});
Hope this will help you!!!
Regards,
Rajat
yes this is working
Thanks so much
Hi @Sultan Alnaabi ,
The issue is because you are not passing the input's Id correctly.
The right way is to create another input in the JS and pass the input.Id.
I have attached the updated oml implementing this way.
Bryan
It is not working
Seems I misunderstood your issue earlier.
If you are looking for a javascript solution, I believe you can use "keyup". I think using "input" messes up with OnChange event.
document.getElementById($parameters.InputId).addEventListener("keyup", function() { Input_TextVar.value = Input_TextVar.value.slice(0, $parameters.MaxLength);});
But I do agree with the selected solution. It would be much better to use the forge component especially if you are going to use more of this masking later on.