4 ms·
Related: I've been struggling for a long time to figure out the best way to implement a currency amount input. In my case I only need to support a single curren
by foreigner 5y ago
Related: I've been struggling for a long time to figure out the best way to implement a currency amount input. In my case I only need to support a single currency (USD), e.g. $9.99. Should it be type=number? type=text? Should I add an input mask? I haven't been able to find a clean answer I'm happy with.
- the_gipsy 5y agoTry the combination of the article - it is what you want.
- foreigner 5y agoBut that won't show the dollar sign ($). It would also allow bogus fractional-cent values like 9.999. And it would display values like 9.9 (one decimal place) instead of the correct $9.90 (two decimal places).
- pas 5y agocan't you use regex to only allow two decimal places?
- the_gipsy 5y agoMaybe take out the dollar sign from the input-value. Or just adjust the regex. Or just validate with js/serverside.
- 568ml 5y agoIf you’re only supporting USD, I would prefix the input with the dollar symbol, I.e. so that it appears to the left of the input rather than as a part of the input itself. This signals the website is accounting for the fact that the given value must be a quantity of USD. You can use a type=number input and prevent bogus fractionals by setting the ‘step’ attribute on the input to ‘0.01’. This will do two things: the up/down clicker buttons will increment/decrement by 0.01, which IMO is all they’re useful for, and the browser should restrict values to two decimal spaces. Of course you still need to validate this on the backend.
- the_gipsy 4y agotype=number allows for weird exponential notations AFAIK.