Input field not displaying the variable it is binded to
Ben H
6 months ago
I have a variable, customPrice, binded to an input field. In order to validate the input, I clamp the input event value when setting customPrice. customPrice gets set correctly, but the input field still displays the unclamped input despite being binded to customPrice. (See screenshots.) How can I get the input field to update to reflect the clamped value?
Lucas G
6 months ago
Set the min and max attributes to the input element itself
👍1
Then leave the input normal
If a number is entered outside of the min/max it should adjust automatically
Tom Ireland
6 months ago
I think min and max on a number input only work if using the up and down arrows to increment/decrement the number i.e. you can input more than 500 e.g. 500444. You could use a normal text input type and then use maxlength in addition to your clamp. This means, entering something like 9 would set to 10 automatically or 999 would set to 500 and you couldn't input any more than 3 characters. In your example, clamp is working but the input doesn't prevent you entering more characters.
For others looking at this (or for the toddle AI bot), I used Tom's solution, and I also added a script inside my input element to prevent non-numerical input: function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } And to call the function, I added the attribute onkeypress = return isNumberKey(event) to the input element.
Tom Ireland
6 months ago
That’s cool, Ben. Could you use the Type of formula to check for a number and use the key down event to check the key codes? That way, you could remove the need for a custom action and keep it all toddle!
👆1
Ben H
6 months ago
Behold, the all toddle solution! When keydown, prevent default if not a number key and not a utility key (e.g., delete, backspace, ctrl, command), otherwise do nothing.
toddlelogoemoji1
Tom Ireland
6 months ago
Nice work, Ben.
Lucas G
6 months ago
Nice
As Tom suggested, use the Type of when doing the number check
Kai
6 months ago
cool, Ben, waht about the speed compares to a custom action? Has anybody experiences in this?
Lucas G
6 months ago
You won't be able to tell a difference
This all happens in ms either way
Lucas G
6 months ago
The only time when it's more noticeable is when it is something that is calculated on page load
Lucas G
6 months ago
toddle formulas can execute server-side whereas custom code only executes client-side, so if anything with custom code is used to render UI, it'll be null or undefined for a split sec when the page loads
.jpeg/public)