HTML5 для ввода номера - всегда показывают 2 знака после запятой


есть ли способ отформатировать input[type='number'] значение, чтобы всегда показывать 2 десятичных знака?

пример: я хочу увидеть "0.00" вместо 0.

спасибо

9 70

9 ответов:

вы не можете действительно, но вы на полпути шаг может быть:

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

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

С помощью

решения, которые используют input="number"step="0.01" отлично работает для меня в Chrome, однако не работает в некоторых браузерах, в частности, Frontmotion Firefox 35 в моем случае.. который я должен поддержать.

мое решение было jQuery с плагином jQuery Mask Игоря Эскобара, следующим образом:

<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 Брэдшоу.

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

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

посмотри этой:

 <input type="number" 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.

Я должен отметить, что это не идеально подходит для больших чисел, поскольку он всегда будет заставлять конечные нули, поэтому пользователю придется переместить курсор назад вместо удаления символов, чтобы установить значение больше, чем 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" />
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}`;
        }
}
}