﻿ Html5 Number Input - Always Show 2 Decimal Places - ITCodar

# 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:-

``\$(document).ready(function(){  \$('input#unitPrice').blur(function(){    var num = parseFloat(\$(this).val());    var cleanNum = num.toFixed(2);    \$(this).val(cleanNum);  });});``
``<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input data-number="Quantity must be a number" data-required="Unit price required" min="0" step="0.01" id="unitPrice" value="" type="number" name="unitPrice" placeholder="Unit Price"/>``