Ввод номера HTML5 - всегда показывать 2 десятичных знака

Ответ 1

Решенный после предложений и добавления части jQuery для форматирования формата для целых чисел parseFloat($(this).val()).toFixed(2)

Ответ 2

Вы не можете на самом деле, но вы можете сделать это на полпути:

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

Ответ 3

Используя атрибут step, он включит его. Он не только определяет, сколько он должен выполнять цикл, но и допустимые числа. Использование step="0.01" должно сделать трюк, но это может зависеть от того, как браузер придерживается стандарта.

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

Ответ 4

Решения, которые используют 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.

Ответ 5

Это быстрый форматировщик в 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()

Ответ 6

Это правильный ответ:

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

Ответ 7

Это работает, чтобы обеспечить максимум 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)
   }
}

Ответ 8

Я знаю, что это старый вопрос, но мне кажется, что ни один из этих ответов, кажется, не отвечает на вопрос, который задают, так что, надеюсь, это поможет кому-то в будущем.

Да, вы всегда можете показать 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" />

Ответ 9

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.

Ответ 10

Мой предпочтительный подход, который использует атрибуты 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

})

Ответ 11

Взгляните на this:

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

Ответ 12

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