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

Question

У меня есть <input type="number" value="0.00" min="0.00" max="1.00" step="0.05">, но когда он достигает 0,1 или 0,2 или 0,3 и т. Д., Мне нужно показать 0,10 вместо 0,1, 1,00 вместо 1

Я попытался атрибут pattern="^\d+(\.|\,)\d{2}$", но он не работает,Есть ли способ добиться этого?

Answer 1

function onInput(event) {
  let value = parseFloat(event.value);
  if (Number.isNaN(value)) {
    document.getElementById('input-1').value = "0.00";
  } else {
    document.getElementById('input-1').value = value.toFixed(2);
  }              
}

<input id="input-1" type="number" min="0.00" max="1.00" step="0.05" oninput="onInput(this)" value="0.00" />

Answer 2

Вы можете реализовать onchange событие и использовать toFixed(2)

<input type="number" onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)" value="0.00" min="0.00" max="1.00" step="0.05">

Answer 3

Используйте шаг 0.01 вместо 0.05 и добавьте eventListener при изменении значения, чтобы принудительно установить фиксированное десятичное число:

var numberElement = document.querySelector('.number-decimal');
numberElement.addEventListener('change',alterNumber);

function alterNumber(event){
var el = event.target;
var elValue = el.value;
el.value = parseFloat(elValue).toFixed(2);

}

<input class="number-decimal" type="number" value="0.00" min="0.00" max="1.00" step="0.01" placeholder="0.00">