0

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

2
  • I'm having trouble envisioning what you mean by "the cursor should be placed into the expected position". Can you provide some screenshots/videos on what the behavior might be? Commented Jul 29, 2023 at 22:40
  • @LeoWattenberg I added more context and a demo for more details. Please see the updated question.
    – Polarcode
    Commented Jul 30, 2023 at 4:45

2 Answers 2

2

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.

1
  • I figured that too. I think I will limit my scope to the most common currency only which contains only two decimal places. I'll study further later on how to solve that when I understand and figure out my first requirement. Thanks anyway!
    – Polarcode
    Commented Jul 30, 2023 at 4:50
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.