HTML5 Sayı Girişi - Her zaman 2 ondalık basamak göster

Bir input[type='number']değeri her zaman 2 ondalık basamak gösterecek şekilde biçimlendirmenin bir yolu var mı ?

Örnek: Bunun 0.00yerine görmek istiyorum 0.

Tam sayılarda formatı zorlamak için önerileri izleyerek ve bir jQuery parçası ekleyerek çözüldü:

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

Gerçekten yapamazsınız, ancak yarım adım atmanız şunlar olabilir:

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

stepÖzniteliği kullanmak onu etkinleştirecektir . Sadece ne kadar dönmesi gerektiğini değil, aynı zamanda izin verilen sayıları da belirler. Kullanılması step="0.01" gereken hile yapmak ama bu standarda nasıl tarayıcı uyar bağlı olabilir.

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

Kullanılan çözümler input="number" step="0.01"benim için Chrome'da harika çalışıyor, ancak bazı tarayıcılarda, özellikle benim durumumda Frontmotion Firefox 35'te çalışmıyor .. desteklemem gerekiyor.

Benim çözümüm, aşağıdaki gibi Igor Escobar'ın jQuery Mask eklentisiyle jQuery idi:

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

Bu iyi çalışıyor, tabii ki daha sonra gönderilen değeri kontrol etmelisiniz :) NOT, tarayıcı uyumluluğu için bunu yapmak zorunda olmasaydım, yukarıdaki cevabı @Rich Bradshaw tarafından kullanırdım.

@ Guil Hernández Ferreira'dan gelen bu cevaba dayanarak parseFloat, alan her değiştiğinde yöntemi tetikleyebilirsiniz . Bu nedenle, kullanıcı değeri manuel olarak bir sayı yazarak değiştirse bile, değer her zaman iki ondalık basamak gösterir.

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

Bu, kullanıcı yazmayı bitirmediyse otomatik olarak 2 haneye yuvarlamadan en fazla 2 ondalık basamağı zorlamak için çalışır.

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

Buraya 2 ondalık basamağı nasıl sınırlandıracağınızı merak ettiyseniz , yerel bir javascript çözümüm var:

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

Bunun AFAIK olamayacağını unutmayın , sayı girişi ile bu krom hatasına karşı savunma yapın .

Bunun eski bir soru olduğunu biliyorum, ama bana öyle geliyor ki, bu yanıtların hiçbiri sorulan soruyu yanıtlamıyor, bu yüzden umarım bu gelecekte birine yardımcı olur.

Evet, her zaman 2 ondalık basamağı gösterebilirsiniz, ancak maalesef sadece element öznitelikleri ile yapılamaz, JavaScript kullanmanız gerekir.

Bunun büyük sayılar için ideal olmadığını belirtmeliyim çünkü her zaman sondaki sıfırları zorlayacaktır, bu nedenle kullanıcının 9.99'dan daha büyük bir değer ayarlamak için karakterleri silmek yerine imleci geri hareket ettirmesi gerekecektir.

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

Bu, JQuery'de .toFixed(2)iki ondalık basamak için işlevi kullanan hızlı bir biçimlendiricidir .

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

Eksileri: yeniden biçimlendirmek için giriş numarası her değiştirildiğinde bunu aramanız gerekir.

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

Not: Bazı nedenlerden dolayı, bir girdi 'sayı' türünde olsa bile jQuery val()bir dize döndürür. Dolayısıyla parseFloat().

dataNumaranın durumunu tutmak için öznitelikleri kullanan tercih ettiğim yaklaşım :

<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

})

En iyi cevap bana çözümü verdi, ancak kullanıcı girişinin hemen değiştirilmesini beğenmedim, bu yüzden bence daha iyi bir kullanıcı deneyimine katkıda bulunan gecikme ekledim

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-maskaçısal için, https://github.com/assisrafael/angular-input-masks

sadece bu:

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

Değerleri tek tek koyarsan ...

need: 120,01

basamak başına rakam

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

Bir göz atın bu :

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

Bu doğru cevap:

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