HTML5 Decimal input type. Here we make an HTML input type as a decimal which displays 2 decimal places.

In this post, I am going to share with you how to make an HTML5 input type as a decimal or HTML5 input type float
There are plenty of ways to make an input type as decimal validation. Here we used a Jquery keyup function to make input type decimal.

HTML5 input type Decimal validation either for 1 or 2 or any decimal you can make. 

For Example

  • If you want 1 precision(decimal) in HTML then you change this jquery function for taking one.
  • If you want 2 precision(decimal) in HTML then you change this jquery function for taking two.

Input type decimal here our code take only two precision (Two decimal digit) you can change code according to your standard

HTML5 Input type decimal.

HTML5 Decimal input type

Input type Decimal

Input type Decimal: HTML5 Input type decimal | Input field decimal  S HELP YOU
 <script type="text/javascript">

    $(document).ready(function () {
    	$('.decimal').keyup(function () {
        var val = $(this).val();
        if (isNaN(val)) {
           val = val.replace(/[^0-9\.]/g, '');
            if (val.split('.').length > 2)
                val = val.replace(/\.+$/, "");
        var checkfordigit = val.split(".");
        if (checkfordigit.length == 2) {
            if (checkfordigit[1].length > 2) {
                val = Number.parseFloat(val).toFixed(2);

In the above code, we have used the keyup function to make Input type decimal you also need a jquery plugins to make run this keyup function.

I have used the latest jquery plugins you can use whatever suits you, but without jquery, you won't able to run this function.

We also take the help of JavaScript toFixed(2) which helps to make 2 Decimal.
Source Code: GITHUB

Post a Comment

Previous Post Next Post