Input numero HTML5: mostra sempre 2 cifre decimali

C'è un modo per formattare un input[type='number']valore per mostrare sempre 2 cifre decimali?

Esempio: voglio vedere 0.00invece di 0.

Risolto seguendo i suggerimenti e aggiungendo un pezzo di jQuery per forzare il formato sugli interi:

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

Non puoi davvero, ma a metà strada potresti essere:

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

L'uso stepdell'attributo lo abiliterà . Non solo determina quanto dovrebbe ciclare, ma anche i numeri consentiti. L'utilizzo step="0.01" dovrebbe fare il trucco, ma questo può dipendere da come il browser aderisce allo standard.

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

Le soluzioni che utilizzo input="number" step="0.01"funzionano alla grande per me in Chrome, tuttavia non funzionano in alcuni browser, in particolare Frontmotion Firefox 35 nel mio caso .. che devo supportare.

La mia soluzione era jQuery con il plugin jQuery Mask di Igor Escobar, come segue:

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

Funziona bene, ovviamente si dovrebbe controllare il valore inviato in seguito :) NOTA, se non dovessi farlo per la compatibilità del browser, userei la risposta sopra di @Rich Bradshaw.

Sulla base di questa risposta di @Guilherme Ferreira puoi attivare il parseFloatmetodo ogni volta che il campo cambia. Pertanto il valore mostra sempre due cifre decimali, anche se un utente modifica il valore digitando manualmente un numero.

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

Questo funziona per applicare un massimo di 2 cifre decimali senza arrotondare automaticamente a 2 cifre se l'utente non ha finito di digitare.

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

Se sei atterrato qui solo chiedendoti come limitare a 2 cifre decimali, ho una soluzione javascript nativa:

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

Nota che questo non può AFAIK, difenditi da questo bug di Chrome con l'immissione del numero.

So che questa è una vecchia domanda, ma mi sembra che nessuna di queste risposte sembri rispondere alla domanda che viene posta, quindi spero che questo possa aiutare qualcuno in futuro.

Sì, puoi sempre mostrare 2 cifre decimali, ma sfortunatamente non può essere fatto solo con gli attributi dell'elemento, devi usare JavaScript.

Devo sottolineare che questo non è l'ideale per i grandi numeri in quanto forzerà sempre gli zeri finali, quindi l'utente dovrà spostare il cursore indietro invece di eliminare i caratteri per impostare un valore maggiore di 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" />

Questo è un formattatore rapido in JQuery che utilizza la .toFixed(2)funzione per due cifre decimali.

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

Contro: devi chiamarlo ogni volta che il numero di input viene modificato per riformattarlo.

// 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: per qualche motivo, anche se un input è di tipo "numero", jQuery val()restituisce una stringa. Quindi il parseFloat().

Il mio approccio preferito, che utilizza dataattributi per mantenere lo stato del numero:

<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 risposta migliore mi ha dato la soluzione ma non mi piaceva che l'input dell'utente fosse cambiato immediatamente, quindi ho aggiunto un ritardo che a mio parere contribuisce a una migliore esperienza utente

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-maskper angolare, https://github.com/assisrafael/angular-input-masks

solo questo:

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

Se dai valore uno per uno ...

need: 120,01

cifra per cifra

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

Dai un'occhiata a questo :

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

Questa è la risposta corretta:

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