O problema de usar maxlength
é que ele acaba sendo "ignorado". Afinal, se você quer um número com no máximo 15 dígitos (por exemplo, 123456789012345
), o valor com máscara será 1.234.567.890.123,45
, ou seja, 20 caracteres.
E o JavaScript aceita que você coloque um valor com mais caracteres que o indicado por maxlength
. Exemplo:
const input = document.querySelector('#valor');
// setar um valor com mais de 15 caracteres
input.value = '12345678901234567890123456789012345678901234567890123456789012345678901234567890';
// maxlength continua sendo 15
console.log(input.maxLength); // 15
// mas o valor tem mais que 15 caracteres
console.log(input.value);
<input type="text" id="valor" maxlength="15" />
Por isso, se o valor já for 123.456.789,09
(ou seja, 14 caracteres), e eu digitar mais um número (por exemplo, 8
), a máscara será aplicada e o valor ficará com 16 caracteres (1.234.567.890,98
). E depois disso não conseguirei digitar mais nada, mesmo que o valor só tenha 12 dígitos (eu só consigo setar um valor com mais caracteres via JavaScript - digitando até daria, como está em outra resposta, mas ela usa o evento keypress
, que como veremos adiante, está obsoleto).
Ou seja, não adianta ter o maxlength
se você pode setar qualquer valor maior que isso. E de qualquer forma, você não quer verificar o tamanho total do campo, e sim a quantidade de dígitos. Colocar maxlength
igual a 15 só deixa o código mais confuso na minha opinião, já que na prática (segundo as regras que você mesmo definiu) ele pode ter mais de 15 caracteres.
Na verdade o que podemos fazer é usar maxlength
igual a 20 (que é a quantidade de caracteres necessários para formatar 15 dígitos), o que impediria de digitar mais caso já esteja "cheio", e na função de máscara garantimos que desses 20 caracteres, no máximo 15 sejam dígitos.
Para que o campo possa ter a informação de quantos dígitos ele aceita, uma alternativa é colocar esta informação no seu dataset. Por exemplo, para ter no máximo 15 dígitos:
<input type="text" id="valor" data-max-digits="15" maxlength="20" />
Assim, basta pegar esta informação na hora de verificar:
// usa vírgula como separador decimal, ponto como separador de milhar, sempre com 2 casas decimais
const formatter = new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
function mask(e) {
const input = e.target;
// elimina tudo que não é dígito
input.value = input.value.replace(/\D+/g, '');
if (input.value.length === 0) // se não tem nada preenchido, não tem o que fazer
return;
// verifica se ultrapassou a quantidade máxima de dígitos (pegar o valor no dataset)
const maxDigits = parseInt(input.dataset.maxDigits);
if (input.value.length > maxDigits) {
// O que fazer nesse caso? Decidi pegar somente os primeiros dígitos
input.value = input.value.substring(0, maxDigits);
}
// lembrando que o valor é a quantidade de centavos, então precisa dividir por 100
input.value = formatter.format(parseInt(input.value) / 100);
}
document.querySelector('#valor').addEventListener('input', mask);
<input type="text" id="valor" data-max-digits="15" maxlength="20" />
Usei um NumberFormat
que formata os números com 2 casas decimais, além de usar os separadores corretos (vírgula para os decimais, ponto para os milhares - isso é controlado pelo locale, que no caso é o valor pt-BR
, que corresponde ao português do Brasil). Desta forma ele não exibe o "R$" antes, mas se quiser inclui-lo, basta fazer como a outra resposta indicou:
// Use isso se quiser que o valor tenha o "R$" antes dos números (mas aí precisa aumentar o maxlength para que inclua o "R$")
const formatter = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
Depois, eu removo tudo que não é dígito (\D+
, ou seja, um ou mais caracteres que não sejam dígitos), e só depois eu vejo se ultrapassou o limite máximo de dígitos (cuja quantidade está indicada no dataset).
Por fim, antes de formatar, eu divido o valor por 100, afinal o que temos são apenas dígitos que correspondem à quantidade total de centavos. Não precisa manipular strings como as outras respostas fizeram, basta ajustar o valor numérico que o NumberFormat
faz o resto para você.
Eu não usei o evento keypress
(que segundo a documentação está obsoleto e não deve ser mais usado), e no lugar coloquei o evento input
, que detecta não apenas se algo é digitado, mas também se é colado via Ctrl+V, ou se algum número é apagado (testei a solução da outra resposta no Chrome, por exemplo, e ela não refaz a máscara se um dígito é apagado, e nem se fizer Ctrl+V de um número), etc.
Aliás, se você por exemplo fizer Ctrl+V de um valor como 12345678901234567890
, eu pego somente os 15 primeiros dígitos (é pra isso que serve o if (input.value.length > maxDigits)
). Pois em casos de copy-paste todo o valor é jogado no input
de uma vez, então eu tenho que eliminar os dígitos a mais (o que não ocorre se você só digita um número por vez, pois neste caso a máscara é aplicada logo depois de cada tecla e não cai no if
). Assim eu garanto que nunca vai ultrapassar a quantidade máxima de dígitos.
O if (input.value.length > maxDigits)
também serve para tratar outras situações, como por exemplo:
- o valor atual do
input
(após aplicar a máscara) é 12.345.678,90
(10 dígitos)
- eu copio (Ctrl+C) o valor
9999999999
(de um outro programa qualquer)
- posiciono o cursor no início (antes do
1
)
- faço Ctrl+V. O valor do
input
passa a ser 999999912.345.678,90
(ele limita usando o valor do maxlength
, por isso que nem todos os 9
são colados - testei no Chrome, não sei se todos os browsers farão da mesma forma). Depois de remover tudo que não é dígito, mas antes de aplicar a máscara, o valor passa a ser 99999991234567890
(17 dígitos), e por fim, depois de pegar somente os 15 primeiros dígitos e aplicar a máscara, fica 9.999.999.123.456,78
Obs: aceitar 15 dígitos significa que o valor máximo do campo é 9.999.999.999.999,99
(quase 10 trilhões de reais), ou seja, um valor maior que o PIB brasileiro de 2020. E no seu HTML o label
do campo é "Valor Renda no Período", então será que 15 dígitos não seria exagero? Enfim...