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

您可以实施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 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" />

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">

在输入类型编号中始终显示2个小数位

3 个答案: