-1

Olá, tenho estado a desenvolver um website e deparei-me com um problema. Quero limitar uma textbox a aceitar apenas 4 números após um "." (ponto). Já fiz várias pesquisas e não consegui encontrar nada que me facilite a vida. Pensei numa forma de o fazer que seria aceitar os números na textbox sem que a posição de escrita se mexa e depois de o utilizador escrever 4 números, colocar automáticamente um "." (ponto).

Depois disto preciso de ajuda a perceber como começar a fazer a máscara.

Antecipadamente, obrigado.

1

1 Resposta 1

1

Não é necessário plugins medonhos e nem usar jQuery para algo tão trivial, dá pra fazer na mão, aprendendo o básico de verdade, é claro.

Um exemplo de máscara que fiz com JS puro ajuda a entender como fazer de forma simples e até adaptar depois: https://pt.stackoverflow.com/a/419538/3635, o processo é basicamente timeout+expressão regular+replace

Feito isto a questão é a que precisará, no caso são quatro numeros após o ponto, sendo assim então se digitar até 4 não tem ponto, creio eu, logo se digitar 5 numeros deve ficar 9.9999, então o regex deve ficar algo como:

/^(\d+)(\d{4})$/

A primeira parte da regex ^(\d+) pega os digitos que devem vir antes do ponto e o (\d{4})$ pega os 4 últimos dígitos. Note que é necessário .replace(/\D+/, ''); para remover o que não são dígitos.

O código ficou assim:

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM carregou');
    
    var campo1 = document.getElementById('campo1');
    
    if (!campo1) return;
    
    var campo1Timeout;
    
    campo1.addEventListener('input', function () {
        if (campo1Timeout) clearTimeout(campo1Timeout);
        
        campo1Timeout = setTimeout(mascara, 200);
    });
    
    function mascara()
    {
         var value = campo1.value.replace(/\D+/, ''); //Remove tudo que não for numero

         value = value.replace(/^(\d+)(\d{4})$/, '$1.$2');      
         campo1.value = value;
    }
});
<input type="tel" name="campo1" id="campo1" placeholder="Seu numero">

3
  • Excelente! Era isso que eu queria, mas há forma de tirar esse timeout e fazer com que corra em tempo real?
    – RedCandy
    Commented 29/01/2020 às 20:39
  • @RedCandy ele evita que execute multiplas vezes sem necessidade, pq se dentro do tempo de 200ms (200 microsegundos) vc digitar novamente o timer zera e começa novamente e não executa a função, até q vc tenha realmente digitado tudo, pq se ocorrer de correr diversas chamadas iria ficar muito lento e até poderia "travar"
    – Syzoth
    Commented 29/01/2020 às 20:42
  • Ok, percebi, muito obrigado!
    – RedCandy
    Commented 29/01/2020 às 20:45

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .