You’re building an iOS app, and need the user to enter a money value. You start by using a UITextField. If you want a basic user experience, then you’re done.
If you want to give the user something better, then the pain begins. The pain is worth it because small details matter. I’ve taken ideas from a few places and combined them into this experience and open source code.
The Experience in 9 images
1. We start and sit there, begging the user to enter something. We’re showing $0.00, so we have sent a signal to them that they are entering a money value. The cursor is flashing at them after the last 0 at the end of the formatted money value.
2. The user taps the 1 key on the number pad. The display value changes to $0.01
3. The user taps the 2 key on the number pad. The display value changes to $0.12
4. The user taps the 3 key on the number pad. The display value changes to $1.23
They haven’t had to enter in a dot. They are just tapping numbers, and the displayed money value is formatting itself in front of their eyes.
5. The user taps some more numbers - 4, 5, and then 6. The display value changes to $1,234.56
We have a comma! The money value is formatted.
6. The user taps Delete. The display value changes to $123.45
7. The user moves the cursor to after 1, taps Delete. The display value changes to $23.45
8. From start the user gets ready to paste in ‘$1,000’ (without quotes) from somewhere else.
9. The “$1,000” gets pasted in and the display value changes to $1,000.00.
Note that the display value didn’t change to $10.00, which would have happened if we didn’t trap the paste and format the value before updating the display value.
Also note that the user could also paste in ‘1000’ or ‘$1000’.
The Code
Go get it - FormattedCurrencyInput on GitHub.
Fork it, or submit a Pull Request, and let’s make it better for others together!