Why does html oninput not work when the input field is wrapped in a component?

needtheanswers · 2025-08-04T15:26:59.545+00:00

Hi, I have an input field component and wanted to allow only numbers, dots and commas. For that I´m using "oninput". It does work but only when the input field is on the page. If the input field is wrapped in a component it doesn´t work - doesn´t matter if the value for oninput is hardcoded or set via attributes. Why is that?

needtheanswers

26 days ago

Hi, I have an input field component and wanted to allow only numbers, dots and commas. For that I´m using "oninput". It does work but only when the input field is on the page. If the input field is wrapped in a component it doesn´t work - doesn´t matter if the value for oninput is hardcoded or set via attributes. Why is that?
Jay Campbell

26 days ago

On the actual input element, set the pattern attribute to "^[0-9.,]+$" and make sure its type is set to "text."
@Jay Campbell
On the actual input element, set the pattern attribute to "^[0-9.,]+$" and make sure its type is set to "text."
needtheanswers

26 days ago

Thank you for your help! Unfortunately it´s still not working.. the input field in the component is still allowing letters. https://editor.nordcraft.com/projects/test13/branches/start/components/HomePage?canvas-width=800&rightpanel=attributes&mode=design&canvas-height=800
Jay Campbell

26 days ago

If you do the pattern, it won't be real-time but when you go to submit it, it'll tell you there's a format error. If you want real-time then you'll have to use custom formulas.
Jay Campbell

26 days ago

@Lucas G Can correct me if I'm wrong. 🤣
@Jay Campbell
If you do the pattern, it won't be real-time but when you go to submit it, it'll tell you there's a format error. If you want real-time then you'll have to use custom formulas.
needtheanswers

26 days ago

I just don´t unterstand why this works when the input field is directly on the page but not when it´s wrapped in a component. If I don´t get it to work then I´ll just put it directly on the page or use custom formuals as you said. Appreciate your help 🙏
Lucas G

26 days ago

These can be done with native formulas actually
On the input event
But to answer the original question, idk why it wouldn't work when in a component
That sounds weird
Lucas G

26 days ago

I removed the comments and it works in the component
🙏1
Filip Dajkovic

26 days ago

You can also check if it's valid like this (when you have pattern attribute) and not change the value if it's not, I've had many issues with Firefox not behaving properly until I done it this way
🔥2
Lucas G

26 days ago

The equals node seems redundant there
👍1
Lucas G

26 days ago

I think if we're going to use JS at all and not simply rely on input attributes then might as well go ahead and use formulas to validate the input in realtime
👍1
But that's my opinion lol
Lucas G

26 days ago

The original script can be implement using native formulas
@Lucas G
These can be done with native formulas actually
needtheanswers

26 days ago

I wanted to use formulas for this initially but even though the variable linked to the input field no longer contained any letters, the input field itself still displayed everything that had been typed. So, I figured using oninput would be a better option in this case. Removing the comments did the trick, thank you for your help Lucas!
@Filip Dajkovic
You can also check if it's valid like this (when you have pattern attribute) and not change the value if it's not, I've had many issues with Firefox not behaving properly until I done it this way
needtheanswers

26 days ago

Didn´t know that! That´s a great tip, thank you Filip 👍

Why does html oninput not work when the input field is wrapped in a component?

needtheanswers

Jay Campbell

needtheanswers

Jay Campbell

Jay Campbell

needtheanswers

Lucas G

Lucas G

Filip Dajkovic

Lucas G

Lucas G

Lucas G

needtheanswers

needtheanswers