web-dev-qa-db-fra.com

Nombre HTML5 - Toujours afficher 2 décimales

Est-il possible de formater une valeur input[type='number'] pour toujours afficher 2 décimales?

Exemple: je veux voir "0.00" au lieu de 0.

Merci

htmlhtml5
81
Guilherme Ferreira

Résolu en suivant les suggestions et en ajoutant un morceau de jQuery pour forcer le format sur les entiers parseFloat($(this).val()).toFixed(2)

41
Guilherme Ferreira

Vous ne pouvez pas vraiment, mais vous pourriez faire un demi-pas:

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

48
Rich Bradshaw

L'utilisation de l'attribut step l'activera . Cela détermine non seulement combien de temps il est censé faire, mais aussi les nombres admissibles. Utiliser step="0.01"devrait faire l'affaire, mais cela peut dépendre de la manière dont le navigateur adhère à la norme.

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

14
Dissident Rage

Les solutions qui utilisent input="number"step="0.01" me conviennent parfaitement dans Chrome, mais ne fonctionnent pas dans certains navigateurs, en particulier Frontmotion Firefox 35 dans mon cas .. que je dois prendre en charge.

Ma solution était de jQuery avec le plugin jQuery Mask d'Igor Escobar, comme suit:

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

Cela fonctionne bien, bien sûr, il convient de vérifier la valeur soumise par la suite :) REMARQUE, si je n'avais pas à le faire pour la compatibilité du navigateur, j'utiliserais la réponse ci-dessus de @ Rich Bradshaw.

7
little_birdie

Ceci est un formateur rapide dans JQuery utilisant la fonction .toFixed (2) pour deux décimales.

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

Inconvénients: vous devez appeler à chaque fois que le numéro saisi est modifié pour le reformater.

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

Remarque: pour une raison quelconque, même si une entrée est de type 'nombre', la fonction jQuery val () renvoie une chaîne. D'où le parseFloat ()

1
kblocks

C'est la bonne réponse:

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

0
Alex

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

seulement ça:

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

si vous mettez la valeur un par un ....

need: 120,01

chiffre par chiffre

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

Je sais que c'est une vieille question, mais il me semble qu'aucune de ces réponses ne semble répondre à la question posée. J'espère que cela aidera quelqu'un à l'avenir.

Oui, vous pouvez toujours afficher 2 décimales, mais malheureusement, cela ne peut être fait qu'avec les attributs d'élément, vous devez utiliser JavaScript.

Je devrais souligner que ce n'est pas idéal pour les grands nombres car cela forcera toujours les zéros à la fin, ainsi l'utilisateur devra déplacer le curseur vers l'arrière au lieu de supprimer des caractères pour définir une valeur supérieure à 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" />

0
Verno

Mon approche préférée, qui utilise les attributs data pour conserver l’état du nombre:

<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

})
0
nikk wong

Cela permet d'appliquer un maximum de 2 décimales sans arrondir automatiquement à 2 positions si l'utilisateur n'a pas fini de taper.

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