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á possivel digitar um numero bem maior, então você pode usar os eventos keyup
e blur
, exemplo:
var foo = document.querySelector(".foo");
//Cria uma função que será usando no keyup e no blue
var f = maxNumber(15.4);
foo.addEventListener('keyup', f);
foo.addEventListener('blur', f);
function maxNumber(max)
{
var running = false;
return function () {
//Para evitar conflito entre o blur e o keyup
if (running) return;
//Bloqueia multiplas chamadas do blur e keyup
running = true;
//Se o input for maior que 15.4 ele irá fixa o valor maximo no value
if (parseFloat(this.value) > max) {
this.value = 15.4;
}
//Habilita novamente as chamadas do blur e keyup
running = false;
};
}
<input class="foo" type="number" min="0" max="15.4" maxlength="4" step="0.01">