What are the expected behavior and characteristics of a currency input?

Question

I'm trying to make a list of the expected behavior and characteristics of a user textbox when it is designed for currency or money input.

Characteristics:

• Numeric only.
• With two decimal places.
• With currency sign.
• With thousands separator.

Expected behavior should be:

• When the user types in, it should automatically format the value with the expected characteristics.
• As the user continues typing, the input should continue formatting the value with the expected characteristics. But while doing it, the cursor should be placed into the expected position.
• On copy-paste command, it should remove all non-numeric values and replace or add only the correct value into the textbox. (I'm not sure if this is correct)

In the expected behavior, the second one, I wanted to have a more technical understanding of how the cursor should behave. For example, as the user types in and the formatting is being executed, where should the cursor be positioned?

I am thinking of the following behavior, I am not sure if this is how it should be.

For example, if I entered 1 in an empty textbox then it should automatically format the textbox to 1.00. However, the cursor should remain at the end of the last entered digit, in this case, it should be 1[cursor should be here].00.

Also, is there any other expected behavior aside from these three and other characteristics?

I made a simple implementation of this using HTML/jQuery for more details, this isn't complete yet, for demonstration purposes only. Currency Input Demo

Answer 1

Be aware that you're running into the messiness of languages, currencies, and region locales here. Sometimes it's as simple as periods and commas changing meaning. Wikipedia has a list of examples for different number formats, and you may run into someone expecting their input of 1億2345萬6789 (Chinese) or 12,34,567.89 (Indian) to be parsed.

Further, according to ISO 4217, some currencies have no decimals, most have 2, but some have 3 or 4.

You're signing up for a world of hurt here if you try to do some clever UX on these.

The safest pattern I've found here is a humble dropdown as the currency selector with a plain text box as the number input, and then a second step which confirms back to the user how that number they just entered got parsed. To be clear, it's possible to envision and implement a better UX than this, however the stakes are much higher than for most other UX tasks - If you end up with a customer who accidentally sent 1000€ instead of 10,00€ because your system didn't interpret comma as a decimal separator, you'll feel the wrath very fast.

Answer 2

Btw, if you are on web, there's an Internationalisation API that does all the work for you.