Entrée numérique HTML5 - Toujours afficher 2 décimales

Existe-t-il un moyen de formater une input[type='number']valeur pour toujours afficher 2 décimales?

Exemple: je veux voir 0.00au lieu de 0.

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)

Vous ne pouvez pas vraiment, mais vous pourriez être à mi-chemin:

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

L'utilisation de l' stepattribut l'activera . Il détermine non seulement combien il est censé faire du cycle, mais aussi les nombres autorisés. L'utilisation step="0.01" devrait faire l'affaire, mais cela peut dépendre de la façon dont le navigateur adhère à la norme.

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

Les solutions qui utilisent input="number" step="0.01"fonctionnent très bien pour moi 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 faut 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.

Sur la base de cette réponse de @Guilherme Ferreira, vous pouvez déclencher la parseFloatméthode à chaque fois que le champ change. Par conséquent, la valeur affiche toujours deux décimales, même si un utilisateur modifie la valeur en tapant manuellement un nombre.

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

Cela fonctionne pour 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)
   }
}

Si vous êtes arrivé ici en vous demandant simplement comment limiter à 2 décimales, j'ai une solution javascript native:

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

Notez que cela ne peut pas AFAIK, se défendre contre ce bug de chrome avec l'entrée de nombre.

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, alors j'espère que cela aidera quelqu'un à l'avenir.

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

Je dois souligner que ce n'est pas idéal pour les grands nombres car cela forcera toujours les zéros de fin, de sorte que l'utilisateur devra déplacer le curseur en 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" />

Il s'agit d'un formateur rapide dans JQuery utilisant la .toFixed(2)fonction 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 l'appeler chaque fois que le numéro d'entrée 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», jQuery val()renvoie une chaîne. D'où le parseFloat().

Mon approche préférée, qui utilise des dataattributs 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

})

La meilleure réponse m'a donné la solution, mais je n'aimais pas que l'entrée utilisateur soit modifiée immédiatement, j'ai donc ajouté un délai qui, à mon avis, contribue à une meilleure expérience utilisateur.

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

seulement ça:

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

Si vous mettez la valeur une par une ...

need: 120,01

chiffre par chiffre

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

Jetez un œil à ceci :

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

Voici la bonne réponse:

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