Nhập số HTML5 - Luôn hiển thị 2 chữ số thập phân

Có cách nào để định dạng một input[type='number']giá trị để luôn hiển thị 2 chữ số thập phân không?

Ví dụ: Tôi muốn xem 0.00thay vì 0.

Đã giải quyết theo các đề xuất và thêm một đoạn jQuery để buộc định dạng trên số nguyên:

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

Bạn thực sự không thể, nhưng bạn đi được nửa bước có thể là:

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

Sử dụng stepthuộc tính sẽ kích hoạt nó . Nó không chỉ xác định số lượng nó phải quay vòng mà còn cả những con số cho phép. Sử dụng step="0.01" nên thực hiện thủ thuật nhưng điều này có thể phụ thuộc vào cách trình duyệt tuân thủ tiêu chuẩn.

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

Các giải pháp sử dụng input="number" step="0.01"hoạt động tốt cho tôi trong Chrome, tuy nhiên không hoạt động trong một số trình duyệt, cụ thể là Frontmotion Firefox 35 trong trường hợp của tôi .. mà tôi phải hỗ trợ.

Giải pháp của tôi là jQuery với plugin jQuery Mask của Igor Escobar, như sau:

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

Điều này hoạt động tốt, tất nhiên người ta nên kiểm tra giá trị đã gửi sau đó :) LƯU Ý, nếu tôi không phải làm điều này để tương thích với trình duyệt, tôi sẽ sử dụng câu trả lời ở trên của @Rich Bradshaw.

Dựa trên câu trả lời này từ @Guilherme Ferreira, bạn có thể kích hoạt parseFloatphương pháp mỗi khi trường thay đổi. Do đó, giá trị luôn hiển thị hai chữ số thập phân, ngay cả khi người dùng thay đổi giá trị bằng cách nhập thủ công một số.

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

Điều này hoạt động để thực thi tối đa 2 chữ số thập phân mà không tự động làm tròn thành 2 chữ số nếu người dùng chưa nhập xong.

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

Nếu bạn đã hạ cánh ở đây chỉ tự hỏi làm thế nào để giới hạn đến 2 chữ số thập phân, tôi có một giải pháp javascript gốc:

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

Lưu ý rằng điều này có thể không AFAIK, bảo vệ chống lại này lỗi chrome với các đầu vào số.

Tôi biết đây là một câu hỏi cũ, nhưng đối với tôi dường như không có câu trả lời nào trong số này trả lời được câu hỏi đang được hỏi vì vậy hy vọng điều này sẽ giúp ích cho ai đó trong tương lai.

Có, bạn luôn có thể hiển thị 2 chữ số thập phân, nhưng tiếc là không thể thực hiện chỉ với các thuộc tính phần tử, bạn phải sử dụng JavaScript.

Tôi nên chỉ ra rằng điều này không lý tưởng cho các số lớn vì nó sẽ luôn buộc các số không ở cuối, vì vậy người dùng sẽ phải di chuyển con trỏ trở lại thay vì xóa các ký tự để đặt giá trị lớn hơn 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" />

Đây là một định dạng nhanh trong JQuery sử dụng .toFixed(2)hàm cho hai chữ số thập phân.

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

Nhược điểm: bạn phải gọi điều này mỗi khi số đầu vào được thay đổi để định dạng lại nó.

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

Lưu ý: vì một số lý do, ngay cả khi đầu vào thuộc loại 'số', jQuery val()sẽ trả về một chuỗi. Do đó parseFloat().

Cách tiếp cận ưa thích của tôi, sử dụng datacác thuộc tính để giữ trạng thái của số:

<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

})

Câu trả lời hàng đầu đã cho tôi giải pháp nhưng tôi không thích rằng đầu vào của người dùng bị thay đổi ngay lập tức, vì vậy tôi đã thêm độ trễ, theo ý kiến ​​của tôi, góp phần mang lại trải nghiệm người dùng tốt hơn

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-maskcho góc, https://github.com/assisrafael/angular-input-masks

chỉ cái này:

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

Nếu bạn đặt từng giá trị một….

need: 120,01

chữ số mỗi chữ số

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

Hãy xem cái này :

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

Đây là câu trả lời chính xác:

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