I’ve gone a bit plugin mad the last few days. Here’s my latest, Input Formatter.
You can use it to format an Input box, live, as the user types. Eg. For inserting spaces between credit card numbers, slashes between MM/YY dates, commas between thousands, etc.
You can set custom formatting options, custom delimiters and prefixes.
You can convert text to uppercase or lowercase.
You can also return the unformatted input string.
Love the plugin and was developing the same with the same js library but there is a problem (that’s why I stopped using it) and hope you solved it so I can also be a user of this.
The problem is in loading default values as they are not formatted. Also extracting the result of the inputted data in a none formatted method.
The plugin has the ability to return the input’s data unformatted, if you want to store it that way. But I hadn’t considered default values! Just checked and you’re right, they were going unformatted.
I’ve just pushed an update to fix this:
There’s two ways people could be using the data from this, they could either want to save the raw input, unformatted, or they could want to save it formatted. So you’ve got two options depending on what you’re doing:
I’ve added a property to the Input Formatter element that will accept an unformatted default value. Use that if you’re saving data unformatted and the Input will show it formatted on page load. If you’re saving data that’s formatted, just use the regular Input element’s default value settings.
Btw, if you’ve installed this plugin already, you’ll need to update it in the plugin tab (and maybe refresh the editor).
Bit off topic here, but playing around with this I’ve just realised I can’t seem to find an option in Bubble to convert a string to a number… has this always been the case? Could have sworn there was an operator for that.
Right now this plugin lets you access the unformatted input value as a Text, think I should also include an option to get it as a Number?
You can convert it to a number by passing it through a separate input field with number as content format. Not very slick, I know, but I’ve used it a few times.
Not sure if this helps in this particular instance though.
@dambusmedia
Hi! I just realized that if you set the Content Format to Text (numbers only) in the Input Field, the formatting doesn`t work. Is there a way around this?
Using the Text (numbers only) is useful to show only numbers in the keyboard on mobile.
Yeah, seems a shame there’s no built in string to number converter. Well, I’ve added an option to the plugin to return the unformatted value as a Number anyway.
You’re right, that’s not working. I don’t think I’m going to be able to fix that as I think Bubble is applying their own input formatting to the input to prevent non-numeric characters, which is overriding the plugin.
What you can do is set the input box content type to Integer or Decimal, which will give you only numbers in the keyboard. However, when you’re saving the data from the input box, Bubble will treat it as a Number and ignore anything after a space or other delimiter. So you have to instead save the Input Formatter’s Unformatted Input value.
