Make an HTML Number Input Always Display 2 Decimal Places

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.

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

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

Format number to always show 2 decimal places

(Math.round(num * 100) / 100).toFixed(2);

Live Demo

var num1 = "1";document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);
var num2 = "1.341";document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);
var num3 = "1.345";document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);

span {    border: 1px solid #000;    margin: 5px;    padding: 5px;}

<span id="num1"></span><span id="num2"></span><span id="num3"></span>

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

Display number always with 2 decimal places on input field

If you're using reactive forms and you're patching a value, you need to patch the value you want to HTML to render.

You can use Angular's DecimalPipe in TypeScript:

import { DecimalPipe } from '@angular/common';

export class Mycomponent {

    constructor(private decimalPipe: DecimalPipe) {}

    private _createModelForm(): FormGroup {
    return this.formBuilder.group({
      acres: this.transformDecimal(this.model.acres)
    });
  }

  transformDecimal(num) {
    return this.decimalPipe.transform(num, '1.2-2');
  }
}

Pure JavaScript solution number input will display 2 decimal places

You need to call the function in onchange. Currently, you're simply referencing it.

Change this:

onchange="setDecimal"

… to this:

onchange="setDecimal(this)"

this passes the input to the function.

Then change your function to this:

function setDecimal(input) {
  input.value = parseFloat(input.value).toFixed(2);
}

function setDecimal(input) {  input.value = parseFloat(input.value).toFixed(2);}

<input placeholder="$0.00" type="number" onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01">

Make an HTML Number Input Always Display 2 Decimal Places