There might be an easier way, but this is how i like doing it:
Don’t display the '_ _ _ ’ using the input itself; use separate visual elements
Set the font color of the input to invisible. (This input is where users type, but they wont be able to actually see it)
Layered under of the Input*, place as many text elements as number of characters in your code.
These text elements would display ‘_’, but use a conditional that checks whether ‘Input: extract with regex: (regex pattern= . (a single dot)): item # X’ is not empty. If it’s not empty, display it.
If you want users to input 4 letters, you would have 4 of these text elements, numbered 1-4.
You’ll need to instal an Instant Input Plugin (Instant text Plugin | Bubble or Keystroke Input Trigger Plugin | Bubble would work) This is necessary because Bubble’s Input Value has too much of a delay to be used like this, and it will feel laggy. Instead of referencing the input’s value in the text element’s conditionals, reference the plugin element’s value.
*Its important that the elements are on top of the input because some devices ( iOS i’m looking at you) the ‘set focus to an input’ does not work, Users have to press on the element for it to focus. So if your input is not above your text elements, users will have a hard time setting the focus.
I would recommend using the following container layout:
Align to parent group
—Input
Row Group
All your text elements