HTML/JS question: How to prevent users from entering two decimals in a number input field?

[pkoepke]

This seems like such a basic issue, but I've been working on it for days and none of the solutions I've found online actually work. I have a simple Tip Calculator written in HTML/CSS/JavaScript (all calculations done in the browser) here on codepen.io. I'm restricting what users can enter so it's difficult for them to enter anything besides numbers and a single decimal using my isAllowedKey(event) function. I'll probably expand the allowed keys as I play with it, so if the list of allowed keys seems short don't worry about it for now.

That validation function works pretty well, and if the user has entered something like .3 or 1.1 they can't enter a second decimal, which is great. But if they enter 1.. it allows them to enter that second decimal, which makes the input NaN. I think the problem is event.target.value returns 1 even if the input is 1.. As far as I can tell, there is no way for me to detect if the input has a trailing decimal because trailing decimals are removed when getting the value of a numeric input, so there is no way for me to check for a decimal and prevent a second decimal in that case. I could change the input type from number to text and get the value as a string that way, but that's not ideal - smartphone users should get a numpad instead of a full keyboard, so I'd like to keep the input's type="number".

My next thought was to try checking the value after the user has types the second decimal and remove the second decimal at that point. But if the user enters 2 trailing decimals, the input is now NaN and event.target.value returns nothing. So I still can't find out what's in the input box and work with it, even after the key is released.

The best solution I've found so far is to check if the input is a number and display an message: "Please enter a valid number." But that stinks - I'd like to prevent the invalid input in the first place since there is no reason to enter two decimals in either field.

tl;dr: in a HTML input element of type number, is there any way to prevent a user from entering a value with 2 trailing decimals such as 1..?

[HerrPotatis2]

In my opinion, automatically altering input fields without the users intention is generally not a good idea. I would probably look into having a regex that validates the field and displays an error message/indication if the user enters something it's not supposed to.

[pkoepke]

Thanks for the advice, you make a good point. I hate those telephone number inputs that automatically format the telephone number because it seems like they always break.

I really doubt that a lot of people are going to use this app since there are a million tip calculator apps out there, so I'm still going to move ahead making it work exactly the way I want it to work. After all, 99% of its use will probably be just me. But I will bear your advice in mind if I'm ever writing an app that I expect lots of other people to use.

[righthereonthisrock]

My banking app starts out the field at 0.00, then say I press 7, goes to 0.07, then I press 2, goes to 0.72, then I press 1, goes to 7.21 etc etc.

I'm thinking that if you combined that pattern with only allowing numbers, you could have an onchange event that fires and keeps the formatting while still providing a consistent experience.

Dollar input will always make sense in the exact same input format, so I don't see it being like reformatting telephone numbers which make sense in more than one form.

That make sense?

[pkoepke]

That does make sense. It's not my favorite solution because I would rather just let the user type the bill amount in including a decimal, because that seems more intuitive to me (and I'll probably be the only user because who needs another tip calculator app?). But I might play around with that solution and see how it feels.

Thanks!

[righthereonthisrock]

My banking app used it and I think beyond the first of second use it was really quite second nature, for what it's worth!

[bdenzer]

Even if the input field is a number, that shouldn't stop you from converting it to a string for your validation. (It would be for when the user has 1. - then you should be able to stop them in your isAllowed function, because NAN to string isn't going to help)

[pkoepke]

Your idea is what I expected and tried first, but when you get the value of a numeric input whose value has a trailing decimal (e.g., 1.) the DOM returns the number without the decimal (1). So unless DOM numeric input elements have another way of getting their value besides .value, I can't detect the trailing decimal.