Qual melhor método ou linha de código para criar uma máscara, seja ela qual for, com regex em input? Ou se há uma boa lib para isso? Em react e etc...
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Qual melhor método ou linha de código para criar uma máscara, seja ela qual for, com regex em input? Ou se há uma boa lib para isso? Em react e etc...
Jessika, boa tarde!
Não existe um melhor método ou linha de código, depende do projeto e do que você quer fazer, além disso deve-se levar em consideração a experiência dos outros desenvolvedores.
A sugestão que deixamos é que, quanto mais fácil seja para você e sua equipe compreender, melhor.
Espero ter ajudado e bons estudos!
Aqui tem um exemplo de máscara com JavaScript e Regex, sem usar nenhuma biblioteca externa
<html>
<head>
<script type="text/javascript">
function mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos
return v;
}
function id( el ){
return document.getElementById( el );
}
window.onload = function(){
id('telefone').onkeyup = function(){
mascara( this, mtel );
}
}
</script>
</head>
<body>
<input type="text" name="telefone" id="telefone" maxlength="15" />
</body>
</html>