Allow 2 decimal places in input type= number
Instead of step="any"
, which allows for any number of decimal places, use step=".01"
, which allows up to two decimal places.
More details in the spec: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute
HTML5 Number Input - Always show 2 decimal places
Solved following the suggestions and adding a piece of jQuery to force the format on integers:
parseFloat($(this).val()).toFixed(2)
Always show 2 decimal places in input type number
You can implement onchange
event and use toFixed(2)
<input type="number" onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)" value="0.00" min="0.00" max="1.00" step="0.05">
Is there a float input type in HTML5?
The number
type has a step
value controlling which numbers are valid (along with max
and min
), which defaults to 1
. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step
).
Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:
<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">
(I'd also set min=0
if it can only be positive)
If you'd prefer to allow any number of decimal places, you can use step="any"
(though for currencies, I'd recommend sticking to 0.01
). In Chrome & Firefox, the stepper buttons will increment / decrement by 1 when using any
. (thanks to Michal Stefanow's answer for pointing out any
, and see the relevant spec here)
Here's a playground showing how various steps affect various input types:
<form>
<input type=number step=1 /> Step 1 (default)<br />
<input type=number step=0.01 /> Step 0.01<br />
<input type=number step=any /> Step any<br />
<input type=range step=20 /> Step 20<br />
<input type=datetime-local step=60 /> Step 60 (default)<br />
<input type=datetime-local step=1 /> Step 1<br />
<input type=datetime-local step=any /> Step any<br />
<input type=datetime-local step=0.001 /> Step 0.001<br />
<input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
<input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
<input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>
HTML number input: how to allow decimal numbers with step=1
<input type="number" step="any">
step any allow user to enter decimal too and increase by 1.
Formatting a number with exactly two decimals in JavaScript
To format a number using fixed-point notation, you can simply use the toFixed method:
(10.8).toFixed(2); // "10.80"
var num = 2.4;
alert(num.toFixed(2)); // "2.40"
Note that toFixed()
returns a string.
IMPORTANT: Note that toFixed does not round 90% of the time, it will return the rounded value, but for many cases, it doesn't work.
For instance:
2.005.toFixed(2) === "2.00"
UPDATE:
Nowadays, you can use the Intl.NumberFormat
constructor. It's part of the ECMAScript Internationalization API Specification (ECMA402). It has pretty good browser support, including even IE11, and it is fully supported in Node.js.
const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(formatter.format(2.005)); // "2.01"
console.log(formatter.format(1.345)); // "1.35"
Restricting input to textbox: allowing only numbers and decimal point
<HTML> <HEAD> <SCRIPT language=Javascript> <!-- function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true; } //--> </SCRIPT> </HEAD> <BODY> <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar"> </BODY></HTML>
Only allow numbers and one dot with 2 decimal places restriction in keypress vuejs
Working example: https://jsfiddle.net/0s14cbqx/
In template:
<input placeholder="Name a price" v-model="price" @keypress="onlyForCurrency">
In js:
data(){
return{
price:null
}
},
methods: {
onlyForCurrency ($event) {
// console.log($event.keyCode); //keyCodes value
let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
// only allow number and one dot
if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.price.indexOf('.') != -1)) { // 46 is dot
$event.preventDefault();
}
// restrict to 2 decimal places
if(this.price!=null && this.price.indexOf(".")>-1 && (this.price.split('.')[1].length > 1)){
$event.preventDefault();
}
}
}
In this way, users only can key in numbers and one dot and can't key in anything after 2 decimal places.
Related Topics
HTML Email - Is Colspan Allowed
How to CSS: Select Element Based on Inner HTML
An 'Ul' Element Can Never Be a Child of a 'P' Element
Nesting <A> Inside <Button> Doesn't Work in Firefox
How to Make an Element's Background-Color a Little Darker Using CSS
HTML Select Box Options on Hover
Padding the Top and the Bottom of Inline Element
How to Change the Length/Position of Text-Decoration:Underline
Why Are Button's Discouraged from Navigation
Calculator Keypad Layout with Flexbox
How to Show Split Header in the Material Table Having Nested Group of Data in Angular
Using Display Inline-Block Columns Move Down
Bootstrap Navbar: Nothing Is Displayed on Smaller Devices
How Does the Vertical-Align Property Work
How to Rotate and Postion an Element on the Top Left or Top Right Corner
Best Way to Synchronize Local HTML5 Db (Websql Storage, SQLite) with a Server (2 Way Sync)