-3

Estou adicionando uma mascará e permitindo somente números em uma função em uma aplicação react, porém também quero limitar os caracteres digitados dentro do input, porém não estou obtendo sucesso, alguém poderia ajudar-me com essa questão, desde já agradeço.

Segue o código js:

const mascaraCPF = () =>{
            const valorInput = document.querySelector('#filtroFuncionario')
            valorInput.addEventListener('input', () =>{
                const i = valorInput.value.length
                const str = valorInput.value
                if(isNaN(Number(str.charAt(i-1)))){
                    valorInput.value = str.substring(0, i-1)
                }
            })
            document.addEventListener('keydown', (e) => { 
                if(e.keyCode != 46 && e.keyCode != 8){
                    const valorInputLen = document.getElementById("filtroFuncionario").value.length
                    var max_len = 14;
                    if (valorInputLen === 3 || valorInputLen === 7)
                    document.getElementById("filtroFuncionario").value = document.getElementById("filtroFuncionario").value + "."
                    else if (valorInputLen === 11) 
                    document.getElementById("filtroFuncionario").value = document.getElementById("filtroFuncionario").value + "-"
                    if(valorInputLen >= max_len){
                        const filtro = document.getElementById("filtroFuncionario").value
                        const filtroSub = filtro.substring(0,14)
                        filtroSub.replace(filtroSub, '')
                        console.log(  filtroSub.replace(filtroSub, ''))
                    }
                }
            });
        }
        mascaraCPF()
1
  • Já tentou <label>CPF:<input id="filtroFuncionario" type="text" maxlength="14"></label> Commented 27/02/2021 às 14:17

1 Resposta 1

0

Acredito que você esteja se aproximando do problema da forma errada, é possível limitar a quantidade de dígitos no 'input' de uma forma bem mais simples e local.

Segue um código funcional (JS vanilla/puro).

var cpf_input;

var cpf;

function input_check(){

if(document.querySelector('#input').value.length < 11) // sendo 11 o número máximo de caracteres permitidos dentro do input, pode ser contido dentro de uma variável.
{cpf = document.querySelector('#input').value}

else{document.querySelector('#input').value = cpf}
}
<input id='input' onkeyup='input_check()'>

Você deve fazer log-in para responder a esta pergunta.

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