Forcing input to a specific formatting?

Hi, rookie question here;

I have an input field where users can type in their car’s license plate info.
I want the input to be forced into a specific formatting of ALL CAPS and numbers, without any spaces in between or at the end (or beginning for that matter).

Example:
User writes: "abc - 123 "
I’d like the input to be automatically corrected to: “ABC-123”

How can I achieve this?

Thanks for any and all help :slight_smile:

Here’s how you do it:

  1. Create your input field and set the “ID attribute” to something meaningful (eg.: formatme).
    2.1) If you have not already exposed this feature, do so under Settings->General->“Expose the option to add an ID attribute to HTML elements”.

  2. Install the “Input Formatter” plugin. It’s marked as deprecated but it seems to work fine for now.

  3. Add an “InputFormatter” element to your page and in it, set:
    Input ID: formatme
    Format type: Custom
    Delimiters: - (make sure to replace the default “space” currently in this field)
    Custom format: 3,3
    Uppercase: checked

  4. Add a HTML element on the page and paste this code into it:
    <script>
    $(document).on(“keydown”,“#formatme” ,function(evt){
    if(evt.keyCode == 32) { return false; }
    });
    </script>

Now, when you type into the field, you will only be able to type letters and numbers (not spaces) and after the first three characters, a “-” will be inserted, after which you will be again able to add three characters. Any letter will be uppercased.


(And here’s an annoyance of Bubble in general and deprecated/unmaintained plugins in particular: The Input Formatter plugin, while not a visual element of it’s own, has a set size which can’t be edited in the new responsive editor but still shows visually, so taking up 64x64px of space somewhere on your page. Hiding the element just disables it, but you can stick it to the bottom of the page if that’s acceptable to you…

An option is to buy another plugin which is called Input Formatter which basically works the same way, but can be shrunk to 1x1px and not having to be moved out of the way.)

1 Like

Thank you so much for your answer! That helped solve my problem! :partying_face:

Cheers to you!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.