Html5 Number Input - Always Show 2 Decimal Places

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">

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

Make an html number input always display 2 decimal places

So if someone else stumbles upon this here is a JavaScript solution to this problem:

Step 1: Hook your HTML number input box to an onchange event

myHTMLNumberInput.onchange = setTwoNumberDecimal;

or in the html code if you so prefer

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Step 2: Write the setTwoDecimalPlace method

function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}

By changing the '2' in toFixed you can get more or less decimal places if you so prefer.

Display a number with 2 decimal places in a number input

Fixed it by using @ViewChild in the component to get the reference to the input element:

export class Component implements AfterViewChecked {
@ViewChild('scale') scaleInput;

/**
* Angular after view checked handler
*/
ngAfterViewChecked(): boolean {
// Display the default value: 1 with 2 decimal places: 1.00
this.scaleInput.nativeElement.value = parseFloat(this.scaleInput.nativeElement.value).toFixed(2);

return super.ngAfterViewChecked();
}
}

Where the html input is now:

            <input #scale <!-- IMPORTANT PART -->
id="scale"
name="scale"
class="ui-g-9"
type="number"
(input)="setTo2FractionalDigits($event)"
[min]="0"
[step]="0.01"
[max]="1"
[required]="true"
[(ngModel)]="ivcProduct.scale"
placeholder="Enter the scale">

Force number input to have two decimal places and ONLY two

You can do it like below:-