Reputation: 4627

HTML5 Number Input - Always show 2 decimal places

Is there's any way to format an input[type='number'] value to always show 2 decimal places?

Example: I want to see 0.00 instead of 0.

Upvotes: 160

Answers (14)

Dissident Rage

Reputation: 2716

Using the step attribute will enable it. It not only determines how much it's supposed to cycle, but the allowable numbers, as well. Using step="0.01" should do the trick but this may depend on how the browser adheres to the standard.

<input type='number' step='0.01' value='5.00'>

Upvotes: 17

nikk wong

Reputation: 8670

My preferred approach, which uses data attributes to hold the state of the number:

const el = document.getElementById('amt');
// react to stepping in UI
el.addEventListener('onchange', ev => ev.target.dataset.val = ev.target.value * 100)

// react to keys
el.addEventListener('onkeyup', ev => {

  // user cleared field
  if (!ev.target.value) ev.target.dataset.val = ''

  // non num input
  if (isNaN(ev.key)) {

    // deleting
    if (ev.keyCode == 8)

      ev.target.dataset.val = ev.target.dataset.val.slice(0, -1)

    // num input
  } else ev.target.dataset.val += ev.key

  ev.target.value = parseFloat(ev.target.dataset.val) / 100

})

<input id="amt" type='number' step='0.01' />

Upvotes: 0

Rich Bradshaw

Reputation: 72975

You can't really do this just with HTML, but you a halfway step might be:

<input type='number' step='0.01' value='0.00' placeholder='0.00' />

Upvotes: 93

little_birdie

Reputation: 5857

The solutions which use input="number" step="0.01" work great for me in Chrome, however do not work in some browsers, specifically Frontmotion Firefox 35 in my case.. which I must support.

My solution was to jQuery with Igor Escobar's jQuery Mask plugin, as follows:

$(document).ready(function () {
  $('.usd_input').mask('00000.00', { reverse: true });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>

<input type="text" autocomplete="off" class="usd_input" name="dollar_amt">

This works well, of course one should check the submitted value afterward :) NOTE, if I did not have to do this for browser compatibility I would use the above answer by @Rich Bradshaw.

Upvotes: 11

Stan

Reputation: 668

The top answer gave me the solution but I didn't like that the user input was changed immediately so I added delay which in my opinion contributes to a better user experience

var delayTimer;
function input(ele) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
       ele.value = parseFloat(ele.value).toFixed(2).toString();
    }, 800); 
}

<input type='number' oninput='input(this)'>

https://jsfiddle.net/908rLhek/1/

Upvotes: 1

Gui Ferreira

Reputation: 4627

Solved following the suggestions and adding a piece of jQuery to force the format on integers:

parseFloat($(this).val()).toFixed(2)

Upvotes: 95

Raphael Vitor

Reputation: 652

ui-number-mask for angular, https://github.com/assisrafael/angular-input-masks

only this:

<input ui-number-mask ng-model="valores.irrf" />

If you put value one by one....

need: 120,01

digit per digit

 = 0,01
 = 0,12
 = 1,20
 = 12,00
 = 120,01 final number.

Upvotes: -3

kblocks

Reputation: 11

This is a quick formatter in JQuery using the .toFixed(2) function for two decimal places.

<input class="my_class_selector" type='number' value='33'/>


// if this first call is in $(document).ready() it will run
// after the page is loaded and format any of these inputs

$(".my_class_selector").each(format_2_dec);
function format_2_dec() {
    var curr_val = parseFloat($(this).val());
    $(this).val(curr_val.toFixed(2));
}

Cons: you have to call this every time the input number is changed to reformat it.

// listener for input being changed
$(".my_class_selector").change(function() {
    // potential code wanted after a change

    // now reformat it to two decimal places
    $(".my_class_selector").each(format_2_dec);
});

Note: for some reason even if an input is of type 'number' the jQuery val() returns a string. Hence the parseFloat().

Upvotes: 1

Stephen Paul

Reputation: 39005

If you landed here just wondering how to limit to 2 decimal places I have a native javascript solution:

Javascript:

function limitDecimalPlaces(e, count) {
  if (e.target.value.indexOf('.') == -1) { return; }
  if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
    e.target.value = parseFloat(e.target.value).toFixed(count);
  }
}

HTML:

<input type="number" oninput="limitDecimalPlaces(event, 2)" />

Note that this cannot AFAIK, defend against this chrome bug with the number input.

Upvotes: 9

mhellmeier

Reputation: 2282

Based on this answer from @Guilherme Ferreira you can trigger the parseFloat method every time the field changes. Therefore the value always shows two decimal places, even if a user changes the value by manual typing a number.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".floatNumberField").change(function() {
            $(this).val(parseFloat($(this).val()).toFixed(2));
        });
    });
</script>

<input type="number" class="floatNumberField" value="0.00" placeholder="0.00" step="0.01" />

Upvotes: 13

Verno

Reputation: 458

I know this is an old question, but it seems to me that none of these answers seem to answer the question being asked so hopefully this will help someone in the future.

Yes you can always show 2 decimal places, but unfortunately it can't be done with the element attributes alone, you have to use JavaScript.

I should point out this isn't ideal for large numbers as it will always force the trailing zeros, so the user will have to move the cursor back instead of deleting characters to set a value greater than 9.99

//Use keyup to capture user input & mouse up to catch when user is changing the value with the arrows
    $('.trailing-decimal-input').on('keyup mouseup', function (e) {

        // on keyup check for backspace & delete, to allow user to clear the input as required
        var key = e.keyCode || e.charCode;
        if (key == 8 || key == 46) {
            return false;
        };

        // get the current input value
        let correctValue = $(this).val().toString();

         //if there is no decimal places add trailing zeros
        if (correctValue.indexOf('.') === -1) {
            correctValue += '.00';
        }

        else {

            //if there is only one number after the decimal add a trailing zero
            if (correctValue.toString().split(".")[1].length === 1) {
                correctValue += '0'
            }

            //if there is more than 2 decimal places round backdown to 2
            if (correctValue.toString().split(".")[1].length > 2) {
                correctValue = parseFloat($(this).val()).toFixed(2).toString();
            }
        }

        //update the value of the input with our conditions
        $(this).val(correctValue);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-number-input" class="form-control trailing-decimal-input" type="number" min="0.01" step="0.01" value="0.00" />

Upvotes: 1

SuperCodeBrah

Reputation: 3134

This works to enforce a max of 2 decimal places without automatically rounding to 2 places if the user isn't finished typing.

function naturalRound(e) {

   let dec = e.target.value.indexOf(".")
   let tooLong = e.target.value.length > dec + 3
   let invalidNum = isNaN(parseFloat(e.target.value))

   if ((dec >= 0 && tooLong) || invalidNum) {
     e.target.value = e.target.value.slice(0, -1)
   }
}

Upvotes: 2

Alex

Reputation: 1160

This is the correct answer:

<input type="number" step="0.01" min="-9999999999.99" max="9999999999.99"/>

Upvotes: -4

chris

Reputation: 4867

Take a look at this:

 <input type="number" step="0.01" />

Upvotes: -4

HTML5 Number Input - Always show 2 decimal places

Answers (14)

Related Questions