Input Angka HTML5 - Selalu tampilkan 2 tempat desimal

Apakah ada cara untuk memformat input[type='number']nilai agar selalu menampilkan 2 tempat desimal?

Contoh: Saya ingin melihat, 0.00bukan 0.

Dipecahkan mengikuti saran dan menambahkan sepotong jQuery untuk memaksa format pada bilangan bulat:

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

Anda tidak bisa benar-benar, tetapi Anda setengah langkah mungkin:

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

Menggunakan stepatribut akan mengaktifkannya . Ini tidak hanya menentukan berapa banyak itu seharusnya siklus, tapi juga angka yang diizinkan. Menggunakan step="0.01" harus melakukan triknya, tetapi ini mungkin tergantung pada bagaimana browser mematuhi standar.

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

Solusi yang digunakan input="number" step="0.01"bekerja dengan baik untuk saya di Chrome, namun tidak berfungsi di beberapa browser, khususnya Frontmotion Firefox 35 dalam kasus saya .. yang harus saya dukung.

Solusi saya adalah menggunakan jQuery dengan plugin jQuery Mask Igor Escobar, sebagai berikut:

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

Ini berfungsi dengan baik, tentu saja seseorang harus memeriksa nilai yang dikirimkan sesudahnya :) CATATAN, jika saya tidak harus melakukan ini untuk kompatibilitas browser, saya akan menggunakan jawaban di atas oleh @Rich Bradshaw.

Berdasarkan ini jawaban dari @Guilherme Ferreira Anda dapat memicu parseFloatmetode setiap kali perubahan lapangan. Oleh karena itu, nilai selalu menunjukkan dua tempat desimal, meskipun pengguna mengubah nilai dengan mengetik angka secara manual.

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

Ini berfungsi untuk memaksakan maksimal 2 tempat desimal tanpa pembulatan otomatis menjadi 2 tempat jika pengguna belum selesai mengetik.

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

Jika Anda mendarat di sini hanya bertanya-tanya bagaimana cara membatasi hingga 2 tempat desimal, saya memiliki solusi javascript asli:

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

Perhatikan bahwa ini tidak dapat AFAIK, bertahan dari bug chrome ini dengan input nomor.

Saya tahu ini adalah pertanyaan lama, tetapi bagi saya tampaknya tidak ada dari jawaban ini yang menjawab pertanyaan yang ditanyakan jadi semoga ini akan membantu seseorang di masa depan.

Ya, Anda selalu dapat menampilkan 2 tempat desimal, tetapi sayangnya ini tidak dapat dilakukan dengan atribut elemen saja, Anda harus menggunakan JavaScript.

Saya harus menunjukkan bahwa ini tidak ideal untuk angka besar karena akan selalu memaksa angka nol yang tertinggal, jadi pengguna harus memindahkan kursor ke belakang alih-alih menghapus karakter untuk menetapkan nilai yang lebih besar dari 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" />

Ini adalah pemformat cepat di JQuery menggunakan .toFixed(2)fungsi untuk dua tempat desimal.

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

Kekurangan: Anda harus memanggil ini setiap kali nomor masukan diubah untuk memformatnya.

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

Catatan: untuk beberapa alasan meskipun input bertipe 'number', jQuery val()mengembalikan string. Oleh karena itu parseFloat().

Pendekatan pilihan saya, yang menggunakan dataatribut untuk menahan status nomor:

<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

})

Jawaban teratas memberi saya solusi tetapi saya tidak suka input pengguna segera diubah jadi saya menambahkan penundaan yang menurut saya berkontribusi pada pengalaman pengguna yang lebih baik

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

hanya ini:

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

Jika Anda memberi nilai satu per satu ....

need: 120,01

digit per digit

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

Coba lihat ini :

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

Ini jawaban yang benar:

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