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"/>
Related Topics
How to Open a Link in New Tab Using Angular
How to Make Space Between Two Buttons in Same Div
Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'
Provide an Image for Whatsapp Link Sharing
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome
How to Limit the Visible Options in an HTML <Select> Dropdown
How to Disable a Checkbox Based on Conditions in Angular 6
How to Remove Hover Effect from Bootstrap Button
Make an HTML Number Input Always Display 2 Decimal Places
Select Option Padding Not Working in Chrome
Simple Way to Display Data in a .Txt File on a Webpage
How to Put Two Button in the Same Line Using Only HTML and CSS
How to Set Filename for Base64 Rendered Pdf Using Object Tag
Setting Attribute Disabled on a Span Element Does Not Prevent Click Events