Введення числа HTML5 - Завжди показуйте 2 знаки після коми

Чи є якийсь спосіб відформатувати input[type='number']значення, щоб завжди відображатися два знаки після коми?

Приклад: Я хочу бачити 0.00замість 0.

Вирішено відповідно до пропозицій та додавання фрагмента 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 Ігоря Ескобара таким чином:

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

Якщо ви приземлилися тут просто цікаво, як обмежити два знаки після коми, у мене є власне рішення JavaScript:

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, захищати від цього хромованого помилки за допомогою введення номера.

Я знаю, що це давнє запитання, але мені здається, що жодна з цих відповідей не відповідає на запитання, яке задають так, сподіваємось, це допоможе комусь у майбутньому.

Так, ви завжди можете показувати 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);
});

Примітка: чомусь навіть якщо вхід має тип "число", 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"/>