HTML5-Zahleneingabe - Immer 2 Dezimalstellen anzeigen

Gibt es eine Möglichkeit, einen input[type='number']Wert so zu formatieren , dass immer 2 Dezimalstellen angezeigt werden?

Beispiel: Ich möchte 0.00statt sehen 0.

Befolgen Sie die Vorschläge und fügen Sie ein Stück jQuery hinzu, um das Format für Ganzzahlen zu erzwingen:

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

Sie können nicht wirklich, aber Sie ein halber Schritt könnte sein:

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

Die Verwendung des stepAttributs aktiviert es . Es bestimmt nicht nur, wie viel es fahren soll, sondern auch die zulässigen Zahlen. Die Verwendung step="0.01" sollte den Trick tun, dies kann jedoch davon abhängen, wie der Browser den Standard einhält.

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

Die verwendeten Lösungen input="number" step="0.01"funktionieren in Chrome hervorragend, funktionieren jedoch in einigen Browsern nicht, insbesondere in meinem Fall Frontmotion Firefox 35 .. was ich unterstützen muss.

Meine Lösung bestand darin, mit dem jQuery Mask-Plugin von Igor Escobar wie folgt zu jQuery:

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

Dies funktioniert gut, natürlich sollte man den übermittelten Wert danach überprüfen :) HINWEIS, wenn ich dies aus Gründen der Browserkompatibilität nicht tun müsste, würde ich die obige Antwort von @Rich Bradshaw verwenden.

Basierend auf dieser Antwort von @Guilherme Ferreira können Sie die parseFloatMethode jedes Mal auslösen , wenn sich das Feld ändert. Daher zeigt der Wert immer zwei Dezimalstellen an, auch wenn ein Benutzer den Wert durch manuelle Eingabe einer Zahl ändert.

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

Auf diese Weise werden maximal 2 Dezimalstellen erzwungen, ohne automatisch auf 2 Stellen gerundet zu werden, wenn der Benutzer die Eingabe noch nicht abgeschlossen hat.

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

Wenn Sie hier gelandet sind, fragen Sie sich nur, wie Sie auf 2 Dezimalstellen beschränken können ich eine native Javascript-Lösung:

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

Beachten Sie, dass dies nicht AFAIK kann, verteidigen Sie sich gegen diesen Chrome-Fehler mit der Zahleneingabe.

Dies ist ein schneller Formatierer in JQuery, der die .toFixed(2)Funktion für zwei Dezimalstellen verwendet.

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

Nachteile: Sie müssen dies jedes Mal aufrufen, wenn die Eingabenummer geändert wird, um sie neu zu formatieren.

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

Hinweis: Aus irgendeinem Grund gibt die jQuery val()eine Zeichenfolge zurück, selbst wenn eine Eingabe vom Typ 'number' ist . Daher die parseFloat().

Ich weiß, dass dies eine alte Frage ist, aber es scheint mir, dass keine dieser Antworten die gestellte Frage zu beantworten scheint, so dass dies hoffentlich jemandem in Zukunft helfen wird.

Ja, Sie können immer 2 Dezimalstellen anzeigen, aber leider kann dies nicht nur mit den Elementattributen durchgeführt werden. Sie müssen JavaScript verwenden.

Ich sollte darauf hinweisen, dass dies für große Zahlen nicht ideal ist, da es immer die nachfolgenden Nullen erzwingt, sodass der Benutzer den Cursor zurück bewegen muss, anstatt Zeichen zu löschen, um einen Wert größer als 9,99 festzulegen

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

Mein bevorzugter Ansatz, bei dem dataAttribute verwendet werden, um den Status der Nummer zu speichern:

<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

})

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-maskfür eckige https://github.com/assisrafael/angular-input-masks

nur das:

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

Wenn Sie einen Wert nach dem anderen setzen ...

need: 120,01

Ziffer pro Ziffer

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

Schauen Sie sich auf diese :

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

Dies ist die richtige Antwort:

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