Currently in Mendix 7.23.x we have written javascript within a HTMLSnippet that prevents a user from entering non-numeric characters into a textbox. This is done by applying a class to each of the textinputs and then adding an event listener to the input. Then a function is called to replace any non-numeric character that is entered. Here is the code that has been written: (function () { const selectorToAdd = 'numeric-format-added'; const numericSelector = '.numeric input:not(.' + selectorToAdd + ')'; const input = document.querySelector(numericSelector); input.classList.add(selectorToAdd); if (input.maxLength === -1 || input.maxLength === 2147483647) { input.maxLength = 9; } ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function (event) { input.addEventListener(event, replaceInputText); }); function replaceInputText() { input.value = replaceText(input.value); }; function replaceText(value) { return value.replace(/[^0-9]/g, ''); }; })(); When the same code is used in Mendix 8 the input value is always coming in as empty. It seems like there is another event that is firing that is conflicting with the above code. Are there any changes in the way that Mendix is now handling listeners on the input widgets? I know that this could be handled through a microflow. However, the requirement is to not allow the entry into the textbox and to handle the input on the client side.
asked
Jason Bartlett
3 answers
0
From my perspective, the correct and best way to do this in Mendix 8 is to use a Pluggable Widget that implements a standard masking library. The new widget properties make it easy to implement normal text box properties like using a label, conditional visibility, and conditional editability, plus use prebuilt components like react-input-mask. I had a very simple version of this concept working in about an hour, and I hope to flesh it out over the coming weeks. Happy to share my code – just reach out.
My best guess as to why your code no longer works as expected is due to input widgets now being based on react. This discussion talks about it a little bit. Essentially I think you shouldn’t try to set the value of an `input` element directly.
answered
Eric Tieniber
1
mind you that using nano flows is also client side, which is in this case also the better way I think (without using snippets and the native mendix way) to build a generic javascript code with a (object/)string as input parameter , which is used by an (generic) On enter/change nano flow
probably not that much refactoring for your use case (adjust the code a little and paste it into your js code, nano flow and use is it as on enter/change flow on the fields)
answered
Sinan Karakurt
0
Why not using a regex either on domain model level or in a validation check in microflow/nanoflow?
That would be better maintainable and fits the platform the best imho.