Wprowadzanie liczb HTML5 - zawsze pokazuj 2 miejsca po przecinku

Czy istnieje sposób na sformatowanie input[type='number']wartości, aby zawsze wyświetlać 2 miejsca po przecinku?

Przykład: chcę zobaczyć 0.00zamiast 0.

Rozwiązano postępując zgodnie z sugestiami i dodając fragment jQuery, aby wymusić format na liczbach całkowitych:

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

Naprawdę nie możesz, ale możesz być w połowie drogi:

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

Użycie stepatrybutu umożliwi to . Określa nie tylko, ile ma cyklować, ale także dopuszczalne liczby. Użycie step="0.01" powinno załatwić sprawę, ale może to zależeć od tego, jak przeglądarka jest zgodna ze standardem.

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

Rozwiązania, których używam, input="number" step="0.01"działają świetnie dla mnie w Chrome, jednak nie działają w niektórych przeglądarkach, szczególnie w moim przypadku Frontmotion Firefox 35 .. które muszę wspierać.

Moim rozwiązaniem było użycie jQuery z wtyczką Igora Escobara jQuery Mask w następujący sposób:

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

Działa to dobrze, oczywiście należy później sprawdzić podaną wartość :) UWAGA, gdybym nie musiał tego robić dla kompatybilności przeglądarki, skorzystałbym z powyższej odpowiedzi autorstwa @Rich Bradshaw.

Na podstawie tej odpowiedzi od @Guilherme Ferreira możesz uruchomić parseFloatmetodę za każdym razem, gdy zmieni się pole. Dlatego wartość zawsze pokazuje dwa miejsca po przecinku, nawet jeśli użytkownik zmieni wartość ręcznie wpisując liczbę.

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

Działa to w celu wymuszenia maksymalnie 2 miejsc po przecinku bez automatycznego zaokrąglania do 2 miejsc, jeśli użytkownik nie skończył pisać.

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

Jeśli wylądowałeś tutaj, zastanawiasz się, jak ograniczyć do 2 miejsc po przecinku , mam natywne rozwiązanie 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)" />

Zauważ, że to nie może AFAIK, bronić się przed tym błędem chrome za pomocą wprowadzania liczb.

Wiem, że to stare pytanie, ale wydaje mi się, że żadna z tych odpowiedzi nie wydaje się odpowiadać na zadane pytanie, więc mam nadzieję, że pomoże to komuś w przyszłości.

Tak, zawsze możesz pokazać 2 miejsca po przecinku, ale niestety nie da się tego zrobić z samymi atrybutami elementu, musisz użyć JavaScript.

Powinienem zwrócić uwagę, że nie jest to idealne dla dużych liczb, ponieważ zawsze wymusza końcowe zera, więc użytkownik będzie musiał cofnąć kursor zamiast usuwać znaki, aby ustawić wartość większą niż 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" />

To jest szybki program formatujący w JQuery używający .toFixed(2)funkcji dla dwóch miejsc po przecinku.

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

Wady: musisz to wywołać za każdym razem, gdy wprowadzany numer jest zmieniany, aby go ponownie sformatować.

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

Uwaga: z jakiegoś powodu, nawet jeśli dane wejściowe są typu „liczba”, jQuery val()zwraca ciąg. Stąd parseFloat().

Moje preferowane podejście, które wykorzystuje dataatrybuty do przechowywania stanu liczby:

<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

})

Najlepsza odpowiedź dała mi rozwiązanie, ale nie podobało mi się, że dane wejściowe użytkownika zostały natychmiast zmienione, więc dodałem opóźnienie, które moim zdaniem przyczynia się do lepszego doświadczenia użytkownika

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-maskdla kątowych, https://github.com/assisrafael/angular-input-masks

tylko to:

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

Jeśli umieścisz wartość jeden po drugim ....

need: 120,01

cyfra na cyfrę

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

Spójrz na to :

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

Oto poprawna odpowiedź:

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