o maxlength
funciona por caracteres digitados (inputados), e não para o formato numerico especifico, o que você pode usar é o atributo max=""
e vai ter que usar o step
para adicionar de 0.01 em 0.01 (ou 0.1), assim:
<input class="foo" type="number" min="0" max="15.4" maxlength="4" step="0.01">
Nota: o maxlength=
esta com o valor 4
e irá limitar para quatro digitos, no caso a intenção é algo como 00.00
Mas é claro que se digitar manualmente será possível digitar um numero bem maior, então você pode usar os eventos input
e blur
, exemplo:
// Cria uma função que será usando no keyup e no blur
maxNumber(document.querySelector(".foo"));
maxNumber(document.querySelector(".bar"));
function maxNumber(input)
{
input.addEventListener('input', handler);
input.addEventListener('blur', handler);
var running = false;
function handler() {
// Para evitar conflito entre o input e o blur
if (running) return;
// Bloqueia múltiplas chamadas do input e blur
running = true;
var max = parseFloat(this.getAttribute("max"));
// Se o input for maior que max="" ele irá fixa o valor maximo no value
if (parseFloat(this.value) > max) this.value = max;
// Habilita novamente as chamadas do blur e keyup
running = false;
};
}
<p>
<strong>Max 15,4:</strong>
<input class="foo" type="number" min="0" max="15.4" maxlength="4" step="0.01">
</p>
<p>
<strong>Max 22,66:</strong>
<input class="bar" type="number" min="0" max="22.66" maxlength="4" step="0.02">
</p>