DEV Community

Discussion on: Adicionando máscaras nos inputs HTML (JS vanilla)

Collapse
vitorluizc profile image
Vitor Luiz Cavalcanti

Tem um adicional no "2.", uma boa parte das bibliotecas de máscara deixaram de ser mantidas e só acumulam issues abertas. Então ter uma solução própria, mesmo que simples, acaba sendo necessário.

A solução em si é muito prática, da pra separar cada função de formatação bonitinho e só usar o helper de máscaras. Porém, talvez pela simplicidade, tem alguns problemas que afetam experiência do usuário.

O primeiro deles é o maxLength não considerar os caracteres inseridos pelo formatador. No CPF, por exemplo, o maxLength correto seria 14 contando os dois pontos (.) e o hífen (-). Com isso para eu editar o último caractere preciso apagar outros 2.

Image from Gyazo

Outro problema, mais complicado de resolver, é a posição do cursor que é "resetada" quando o attributo value é alterado. O método setSelectionRange do <input /> e do <textarea /> que pode ajudar nisso, mas ele não da suporte a todos os tipos de <input /> e calcular a próxima posição depois da formatação ser aplicada é um pouco dificil.

Image from Gyazo

Eu achei muito bacana o artigo, parabéns.

Collapse
laurolyra profile image
Lauro Lyra Aguiar Author

Finalmente atualizei o código. Muito obrigado pelo toque, irmão!

Collapse
laurolyra profile image
Lauro Lyra Aguiar Author

De fato, isso tem rolado com o JS Vanilla. No React, onde desenvolvi a ideia original, não me deparei com isso. Vou estudar essas implementações e dar os devidos créditos na edição! Obrigado!