html - money - input type number thousand separator

Entrada de número HTML5: siempre muestra 2 decimales

Question

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

Ejemplo: Quiero ver "0.00" lugar de 0 .

Gracias

Answer 1

Echa un vistazo a this :

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

Answer 2

En realidad no puedes, pero a mitad de camino podrías ser:

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

Answer 3

Esta es la respuesta correcta:

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

Answer 4

Esto funciona para imponer un máximo de 2 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)
   }
}

Answer 5

Las soluciones que usan input="number" step="0.01" funcionan muy bien para mí en Chrome, pero no funcionan en algunos navegadores, especialmente 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.

Answer 6

Resuelto siguiendo las sugerencias y agregando una parte de jQuery para forzar el formato en enteros parseFloat($(this).val()).toFixed(2)

Answer 7

Usar el atributo de step lo habilitará . No solo determina cuánto se supone que debe hacer un ciclo, sino también los números permitidos. Usar step="0.01" debería ser el truco, pero esto puede depender de cómo el navegador se adhiere al estándar.

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

Answer 8

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