HTML5-Zahleneingabe - Zeigt immer 2 Dezimalstellen an

Sie können nicht wirklich, aber Sie könnten einen halben Schritt sein:

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

Wenn Sie das Attribut step verwenden, wird es aktiviert . Es bestimmt nicht nur, wie viel es fahren soll, sondern auch die zulässigen Zahlen. Verwenden Sie step="0.01"sollte den Trick ausführen, dies kann jedoch davon abhängen, wie der Browser den Standard einhält.

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

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

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

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

Das funktioniert gut, natürlich sollte man den übergebenen 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.

Dies ist ein schneller Formatierer in JQuery, der die Funktion .toFixed (2) 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 eingegebene Nummer 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);
});

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

Das ist die richtige Antwort:

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

ui-number-mask für eckige, https://github.com/assisrafael/angular-input-masks

nur das:

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

wenn du Wert eins nach dem anderen legst ....

need: 120,01

ziffer pro Ziffer

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

Ich weiß, dass dies eine alte Frage ist, aber mir scheint, dass keine dieser Antworten die gestellte Frage zu beantworten scheint. Hoffentlich hilft dies jemandem in der Zukunft.

Ja, Sie können immer 2 Nachkommastellen anzeigen, aber leider ist dies nicht allein mit den Elementattributen möglich. Sie müssen JavaScript verwenden.

Ich sollte darauf hinweisen, dass dies nicht ideal für große Zahlen ist, da dies immer die nachfolgenden Nullen erzwingt. Der Benutzer muss also den Cursor zurück bewegen, anstatt Zeichen zu löschen, um einen Wert über 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 data Attribute verwendet werden, um den Status der Zahl 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

})

Dadurch werden maximal 2 Dezimalstellen erzwungen, ohne dass automatisch auf 2 Stellen gerundet wird, wenn der Benutzer die Eingabe 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)
   }
}