Enabling Fractions/Cents/Decimals for Number Input
To allow fractions on an number input, you need to specify the step attribute to any:
This will specifically keep Chrome from displaying an error when a decimal/fractional currency is entered into the input. Mozilla, IE, etc... don't error out if you forget to specify step="any". W3C spec states
that step="any" should, indeed, be needed to allow for decimals. So, you should definitely use it. //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step
Note that if you want the up/down buttons to do a specific granularity, then you must specify a numeric step such as ".01".
Also, the number input is now pretty widely supported [>90% of users].
What Input Options are there for Money/Currency?
The title of the question has since changed and takes on a slightly different meaning. One could use both number or text input in order to accept money/decimals.
For an input field for currency/money, it is recommended to use input type of number and specify appropriate attributes as outlined above. As of 2020, there is not a W3C spec for an actual input type of currency or money.
Main reason being it automatically coerces the users into entering a valid standard currency format and disallows any alphanumeric text. With that said, you could certainly use the regular text input and do some post processing to only grab the numeric/decimal value [there should be server side validation on this at some point as well].
The OP detailed a requirement of currency symbols and commas. If you want fancier logic/formatting like that, [as of 2020] you'll need to create custom JS logic for a text input or find a plugin.
Run
Save
Fork
Set as base
Collaborate
- Settings
- Sign in
Editor layout
Classic Columns Bottom results Right results Tabs [columns] Tabs [rows]
Console
Console in the editor [beta]
Clear console on run
General
Line numbers
Wrap lines
Indent with tabs
Code hinting [autocomplete] [beta]
Behavior
Auto-run code
Only auto-run code that validates
Auto-save code [bumps the version]
Auto-close HTML tags
Auto-close brackets
Live code validation
Highlight matching tags
Boilerplates
Show boilerplates bar less often
Save anonymous [public] fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
Fork anonymous [public] fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
JavaScript HTML CSS Result Light Dark No autoresizing to fit the code Render blocking of the parent pageTabs:
Visual:
Embed snippet Prefer iframe?:
Fiddle meta
Resources URL cdnjs 0
- Paste a direct CSS/JS URL
- Type a library name to fetch from CDNJS
Async requests
/echo simulates Async calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/
See docs for more info.
Other [links, license]
Created and maintained by Piotr and Oskar.
Hosted on DigitalOcean
All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.
Links
Bug tracker
Roadmap [vote for features]
About
Docs
Service status
Language
Doctype
Body tag
Language
Frameworks & Extensions
- Clientcide 3.0.3
- Mootools More 1.3.2
- Mootools More 1.3.2.1
- PowerTools 1.0.5
Framework attribute
Language
Options
Normalized CSS
- This fiddle has previously unsaved changes. Apply changes Discard
IE is no longer supported 📠