Skip to main content

Philosophy

Regular un-formatted inputs offer the best UX possible, the user is never surprised because it is trivial to predict what pressing a given key will do. All other formatting / masking solutions out there try to change what the user is typing in a flaky way, which is terrible for predictability and UX.

Our solution

Our solution is straight forward: keep using an un-formatted input and display a fake-formatted input next to it:

tip

Notice that no matter what you do on the real input, you cannot select the dollar sign, or place the cursor to the right of the coma on the fake input. That is because the fake input simply mimics the real one, and there are no dollar sign and no character between the "1" and "2" in the real input.

Now if we only show the fake input, and keep the un-formatted input hidden, we end up with a formatted input that feels like a normal input.