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()
<label>CPF:<input id="filtroFuncionario" type="text" maxlength="14"></label>