Previous post

Be careful where you click

December 11, 2025 at 10:24 AM by Dr. Drang

I ran into an example of especially bad design on a web page yesterday. Not “how it looks” design; “how it works” design.

Here’s an excerpt from an online payment page:

Excerpt from payment web page

Looks straightforward, right? Just click in the field, type in the amount to pay, and off you go. But unlike almost every other example you’ll see nowadays, this field doesn’t automatically select its dummy contents when you click in it. So what you type does not replace the dummy contents. Here’s a video showing what can happen.

There are three interactions in the video.

  1. I clicked to the right of the “$0.00” default amount and typed “12345.” You can see the zeros disappear as I type, and the amount at the end is $123.45. Let’s assume this is what I wanted to enter.
  2. I clicked just to the right of the decimal point and typed “12345.” The cursor first jumps to the beginning of the amount. After I type the “1,” it jumps to the end, and the “2345” fills in from the right. But two of the zeros never disappear, and the amount at the end is $10,023.45.
  3. I clicked just to the right of the dollar sign and typed “12345.” After I type “123,” the cursor jumps to the end and the “45” fills in from the right. None of the zeros disappear, and the amount at the end is $123,000.45.

I want to emphasize that I never moved the cursor myself after the initial click in the field. All I did was type.

As you might guess, I discovered this when I nearly made an enormous overpayment.

It’s true that a standard HTML <input type="text" /> form field with a value attribute will put the cursor where you click, so a user could screw up the entry in that kind of field, too. But the value attribute is meant to be a default, a common legitimate entry. No one ever goes online to pay $0.00. A more appropriate pure HTML solution would be to use the placeholder attribute, which puts gray text in the field to suggest what the field is for. As soon as you start typing in such a field, the placeholder text disappears.

For the designers of this website, though, standard HTML just wasn’t good enough. They wanted to show off their elite JavaScript skills to keep the dollar sign and decimal point in place and add commas as the user types. In the process, they created a field in which the cursor jumps around haphazardly and the user can easily create a mistaken payment.

Am I the only user who’s noticed this? Impossible.1 But we’ve gotten so used to crap like this that we just sigh, figure out how to fix things on our end, and move on with our lives. I did point this problem out to the vendor, who was surprised to hear it, but payment processing is a service they buy from someone else. It’s unlikely that the people responsible for the poor user interface will ever be told to fix it.

  1. I probably am the only person who tried out all the different places to click. Not included in the video: clicking just to the left of the decimal point, which works the same as clicking just to right of it; and clicking between the zeros after the decimal point, which leads to an entry of $1,023.45 ↩

Previous post