#html
#HTML
Вопрос:
У меня есть <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}$" атрибут, но он не работает. Есть ли какой-либо способ добиться этого?
Ответ №1:
Вы можете реализовать 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"> Комментарии:
1. На помощь приходят выражения функций, вызываемые немедленно (IIFE)
Ответ №2:
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" /> Комментарии:
1. этот вариант еще лучше, поскольку он вызывается при каждом изменении значения.
Ответ №3:
Используйте step 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">