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.
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.
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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
maxLengthnão considerar os caracteres inseridos pelo formatador. No CPF, por exemplo, omaxLengthcorreto seria14contando os dois pontos (.) e o hífen (-). Com isso para eu editar o último caractere preciso apagar outros 2.Outro problema, mais complicado de resolver, é a posição do cursor que é "resetada" quando o attributo
valueé alterado. O métodosetSelectionRangedo<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.Eu achei muito bacana o artigo, parabéns.
Finalmente atualizei o código. Muito obrigado pelo toque, irmão!
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!