A JavaScript plugin that forces decimal entry on input elements. I made this because I'm working on a web-app that requires decimal input, however, the default iOS numeric keypad does not include a period. The height feature was added just because I needed it for my app, and thought it might be useful.
See a demo.
All you have to do is download the decimal-input.js file and include it in your project. That's it.
Include the decimal-input.js file at the bottom of your body and initialize it. By default, the selector to activate your inputs is .decimal, but you can change this to anything else in your initialization.
<body>
<!-- rest of your code -->
<input class="decimal" type="number"/>
...
<script type="text/javascript" src="link/to/decimal-input.js"></script>
<script type="text/javascript">
decimalInput();
</script>
</body>By default, this sets your inputs to 2 decimal places, however there are a few global configuration options, as well as input-level options.
selector: this sets the selector that decimal-input.js will watch and automatically format. Default value is.decimal. You should primarily use class selectors for targets if using multiple inputs.
decimalInput({
selector: ".decimal"
})format: this sets the formatting type for the inputs. Can bestandardorheight. Default value isstandard.
decimalInput({
format: "standard"
})length: this sets the number of decimal places used in formatting your inputs. Default value is2. This value only affects inputs displaying in the standard format.
decimalInput({
length: 2
})validation: this sets the type of validation to be used on height inputs. Can besoftorhard. Default value issoft.- Soft validation marks the input as invalid and you can hook onto this with css to show it as such.
- Hard validation calculates the actual value in feet and inches and replaces the entry in the input.
decimalInput({
validation: "soft"
})All the input level options are applied using the data attribute. These override the global options only for the input they are applied on.
format: this, just like the global option, sets the formatting type for the specific input it's used on. Can bestandardorheight.
<input class="decimal" type="number" data-format="standard"/>length: this sets the number of decimal places to be displayed for the specific input, but only affects the standard format.
<input class="decimal" type="number" data-length="2"/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent