Как я могу сделать отображение полей номера HTML5 завершающим нулями?

Ответ 1

У меня была небольшая игра с этим и посмотрела на спецификацию. В нем говорится, что это должно быть допустимое число с плавающей запятой. В одном из предложений определение действительного числа с плавающей запятой оно дает то, что привлекло мое внимание:

Лучшее представление числа n как числа с плавающей запятойстрока, полученная от применения оператора JavaScript ToString к п.

Это означает, что формат всегда будет соответствовать оценке числа, а затем использовать JavaScript toString на этом номере. Таким образом, никакие конечные 0s тогда.

Итак, вам придётся прибегнуть к JavaScript. Это не так просто, потому что document.getElementById('numInput').value = '0.50'; по-прежнему исправляется до 0.5, поэтому проверка не запускается в onchange, где действие по умолчанию может быть предотвращено, оно срабатывает внутренне.

Это лучшее решение, с которым я мог бы придумать... это немного взломать, и для повышения надежности потребуется немного подстройки, но, надеюсь, он будет делать то, что вы хотите:

var numInput = document.getElementById('numInput');
numInput.addEventListener('keypress', function () {
    this.setAttribute('type', 'text');
});
numInput.addEventListener('click', function () {
    this.setAttribute('type', 'number');
});

Итак, если пользователь хочет ввести номер путем ввода, он переключает тип ввода на текст, но когда он нажимает на него, он преобразует его обратно в число.

Если вам всегда нужны конечные 0, независимо от типа пользователя, вы можете сделать это примерно так:

var numInput = document.getElementById('numInput');
numInput.addEventListener('blur', function () {
    if (this.value === '') {
        return;
    }
    this.setAttribute('type', 'text');
    if (this.value.indexOf('.') === -1) {
        this.value = this.value + '.00';
    }
    while (this.value.indexOf('.') > this.value.length - 3) {
        this.value = this.value + '0';
    }
});
numInput.addEventListener('focus', function () {
    this.setAttribute('type', 'number');
});

Изменить: Я думаю, что второе решение больше похоже на то, что может ожидать пользователь, но это означает, что если пользователь набирает 0.5, он будет принужден к 0.50, поэтому это зависит если это то, что вы хотите.

Ответ 2

Я подключил событие on ('change') к входу, которое вы хотите перевести 0

$('.number-input').on('change', function(){
    $(this).val(parseFloat($(this).val()).toFixed(2));
});

Он просто берет значение, отбрасывает его в float, передает его в строку на число десятичных знаков и помещает обратно в качестве значения.