Entrada de números HTML5: mostrar siempre 2 decimales

¿Hay alguna forma de formatear un input[type='number']valor para que siempre muestre 2 lugares decimales?

Ejemplo: quiero ver en 0.00lugar de 0.

Resuelto siguiendo las sugerencias y agregando una pieza de jQuery para forzar el formato en enteros:

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

Realmente no puedes, pero tu paso a mitad de camino podría ser:

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

El uso del stepatributo lo habilitará . No solo determina cuánto se supone que debe ciclar, sino también los números permitidos. El uso step="0.01" debería funcionar , pero esto puede depender de cómo el navegador se adhiera al estándar.

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

Las soluciones que utilizo input="number" step="0.01"funcionan muy bien para mí en Chrome, sin embargo, no funcionan en algunos navegadores, específicamente Frontmotion Firefox 35 en mi caso .. que debo admitir.

Mi solución fue jQuery con el complemento jQuery Mask de Igor Escobar, de la siguiente manera:

<script src="/your/path/to/jquery-mask.js"></script>
<script>
    $(document).ready(function () {
        $('.usd_input').mask('00000.00', { reverse: true });
    });
</script>

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

Esto funciona bien, por supuesto, uno debe verificar el valor enviado después :) NOTA, si no tuviera que hacer esto para la compatibilidad del navegador, usaría la respuesta anterior de @Rich Bradshaw.

Con base en esta respuesta de @Guilherme Ferreira, puede activar el parseFloatmétodo cada vez que cambia el campo. Por lo tanto, el valor siempre muestra dos lugares decimales, incluso si un usuario cambia el valor escribiendo manualmente un número.

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

Esto funciona para aplicar un máximo de 2 lugares decimales sin redondear automáticamente a 2 lugares si el usuario no ha terminado de escribir.

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)
   }
}

Si aterrizó aquí preguntándose cómo limitar a 2 lugares decimales , tengo una solución nativa de JavaScript:

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

Tenga en cuenta que esto no puede AFAIK, defiéndase contra este error de Chrome con la entrada de número.

Sé que esta es una pregunta antigua, pero me parece que ninguna de estas respuestas parece responder a la pregunta que se hace, así que espero que esto ayude a alguien en el futuro.

Sí, siempre puede mostrar 2 lugares decimales, pero desafortunadamente no se puede hacer solo con los atributos del elemento, debe usar JavaScript.

Debo señalar que esto no es ideal para números grandes, ya que siempre forzará los ceros finales, por lo que el usuario tendrá que mover el cursor hacia atrás en lugar de eliminar caracteres para establecer un valor superior a 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" />

Este es un formateador rápido en JQuery que usa la .toFixed(2)función para dos lugares decimales.

<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));
}

Contras: debe llamar a esto cada vez que se cambia el número de entrada para reformatearlo.

// 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);
});

Nota: por alguna razón, incluso si una entrada es de tipo 'número', jQuery val()devuelve una cadena. De ahí el parseFloat().

Mi enfoque preferido, que usa dataatributos para mantener el estado del número:

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

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

})

La respuesta principal me dio la solución, pero no me gustó que la entrada del usuario se cambiara de inmediato, así que agregué un retraso que, en mi opinión, contribuye a una mejor experiencia del usuario.

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/

import { Component, Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'replace'
})

export class ReplacePipe implements PipeTransform {
    transform(value: any): any {
        value = String(value).toString();
        var afterPoint = '';
        var plus = ',00';
        if (value.length >= 4) {
            if (value.indexOf('.') > 0) {
                afterPoint = value.substring(value.indexOf('.'), value.length);
                var te = afterPoint.substring(0, 3);
                if (te.length == 2) {
                    te = te + '0';
                }
            }
            if (value.indexOf('.') > 0) {
                if (value.indexOf('-') == 0) {
                    value = parseInt(value);
                    if (value == 0) {
                        value = '-' + value + te;
                        value = value.toString();
                    }
                    else {
                        value = value + te;
                        value = value.toString();
                    }
                }
                else {
                    value = parseInt(value);
                    value = value + te;
                    value = value.toString();
                }
            }
            else {
                value = value.toString() + plus;
            }
            var lastTwo = value.substring(value.length - 2);
            var otherNumbers = value.substring(0, value.length - 3);
            if (otherNumbers != '')
                lastTwo = ',' + lastTwo;
            let newValue = otherNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ".") + lastTwo;
            parseFloat(newValue);
            return `${newValue}`;
        }
}
}

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

solo esto:

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

Si pones valor uno a uno ...

need: 120,01

dígito por dígito

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

Eche un vistazo a esto :

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

Esta es la respuesta correcta:

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