Как я могу заставить числовое поле HTML5 отображать конечные нули?

Question

У меня есть поле:

<input type='number' />

Я бы хотел набрать 0.50 без «исправления» до 0.5, чтобы оно отображало 0.50.

Answer 1

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

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

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

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

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

Если вам всегда нужны конечные 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, поэтому зависит, хотите ли вы этого.

Answer 2

Я прикрепил событие on ('change') к входу, для которого вы хотите иметь завершающие 0 *

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

Он просто принимает значение, переводит его в число с плавающей точкой, передает его в строку дляколичество знаков после запятой и возвращает его в качестве значения.