การป้อนตัวเลข HTML5 - แสดงทศนิยม 2 ตำแหน่งเสมอ

มีวิธีใดในการจัดรูปแบบinput[type='number']ค่าเพื่อให้แสดงทศนิยม 2 ตำแหน่งเสมอ?

ตัวอย่าง: ฉันต้องการจะดูแทน0.000

แก้ไขตามคำแนะนำและเพิ่ม jQuery เพื่อบังคับรูปแบบเป็นจำนวนเต็ม:

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

คุณทำไม่ได้จริงๆ แต่คุณมาได้ครึ่งทางแล้ว:

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

การใช้แอตทริบิวต์จะเปิดใช้งานได้step ไม่เพียง แต่กำหนดจำนวนรอบที่ควรจะหมุนเวียนเท่านั้น แต่ยังรวมถึงตัวเลขที่อนุญาตด้วย การใช้step="0.01" ควรทำเคล็ดลับ แต่อาจขึ้นอยู่กับว่าเบราว์เซอร์ปฏิบัติตามมาตรฐานอย่างไร

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

โซลูชันที่ใช้ input="number" step="0.01"งานได้ดีสำหรับฉันใน Chrome อย่างไรก็ตามไม่สามารถใช้งานได้ในบางเบราว์เซอร์โดยเฉพาะ Frontmotion Firefox 35 ในกรณีของฉัน .. ซึ่งฉันต้องสนับสนุน

วิธีแก้ปัญหาของฉันคือ jQuery ด้วยปลั๊กอิน jQuery Mask ของ Igor Escobar ดังต่อไปนี้:

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

วิธีนี้ใช้งานได้ดีแน่นอนว่าควรตรวจสอบค่าที่ส่งในภายหลัง :) หมายเหตุหากฉันไม่จำเป็นต้องทำสิ่งนี้เพื่อความเข้ากันได้ของเบราว์เซอร์ฉันจะใช้คำตอบด้านบนโดย @Rich Bradshaw

จากคำตอบนี้จาก @Guilherme Ferreira คุณสามารถเรียกใช้parseFloatเมธอดนี้ได้ทุกครั้งที่มีการเปลี่ยนแปลงฟิลด์ ดังนั้นค่าจะแสดงทศนิยมสองตำแหน่งเสมอแม้ว่าผู้ใช้จะเปลี่ยนค่าด้วยการพิมพ์ตัวเลขด้วยตนเองก็ตาม

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

วิธีนี้จะบังคับใช้ทศนิยมสูงสุด 2 ตำแหน่งโดยไม่ต้องปัดเศษเป็น 2 ตำแหน่งโดยอัตโนมัติหากผู้ใช้พิมพ์ไม่เสร็จ

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

หากคุณมาที่นี่เพียงแค่สงสัยว่าจะจำกัด ทศนิยม 2 ตำแหน่งได้อย่างไรฉันมีวิธีแก้ปัญหาจาวาสคริปต์ดั้งเดิม:

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

โปรดทราบว่าสิ่งนี้ไม่สามารถ AFAIK ป้องกันข้อผิดพลาดของ Chrome นี้ด้วยการป้อนตัวเลข

ฉันรู้ว่านี่เป็นคำถามเก่า แต่สำหรับฉันแล้วดูเหมือนว่าไม่มีคำตอบใดที่จะตอบคำถามที่ถูกถามดังนั้นหวังว่านี่จะช่วยใครบางคนในอนาคต

ใช่คุณสามารถแสดงทศนิยม 2 ตำแหน่งได้ตลอดเวลา แต่น่าเสียดายที่ไม่สามารถทำได้ด้วยแอตทริบิวต์องค์ประกอบเพียงอย่างเดียวคุณต้องใช้ JavaScript

ฉันควรชี้ให้เห็นว่าสิ่งนี้ไม่เหมาะสำหรับตัวเลขจำนวนมากเนื่องจากจะบังคับให้เลขศูนย์ต่อท้ายเสมอดังนั้นผู้ใช้จะต้องเลื่อนเคอร์เซอร์ไปข้างหลังแทนที่จะลบอักขระเพื่อตั้งค่าที่มากกว่า 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" />

นี่คือตัวจัดรูปแบบด่วนใน JQuery โดยใช้.toFixed(2)ฟังก์ชันสำหรับทศนิยมสองตำแหน่ง

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

จุดด้อย: คุณต้องเรียกสิ่งนี้ทุกครั้งที่เปลี่ยนหมายเลขอินพุตเพื่อฟอร์แมตใหม่

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

หมายเหตุ: ด้วยเหตุผลบางประการแม้ว่าอินพุตจะเป็นประเภท 'number' jQuery val()จะส่งคืนสตริง ดังนั้นparseFloat().

แนวทางที่ฉันต้องการซึ่งใช้dataแอตทริบิวต์เพื่อรักษาสถานะของตัวเลข:

<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

})

คำตอบด้านบนให้วิธีแก้ปัญหาแก่ฉัน แต่ฉันไม่ชอบที่การป้อนข้อมูลของผู้ใช้มีการเปลี่ยนแปลงทันทีดังนั้นฉันจึงเพิ่มความล่าช้าซึ่งในความคิดของฉันก่อให้เกิดประสบการณ์การใช้งานที่ดีขึ้น

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-mask สำหรับเชิงมุม https://github.com/assisrafael/angular-input-masks

แค่นี้:

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

ถ้าใส่คุณค่าทีละ ....

need: 120,01

ตัวเลขต่อหลัก

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

ดูสิ่งนี้ :

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

นี่คือคำตอบที่ถูกต้อง:

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