Formatar campos de entrada automaticamente com o Cleave.js
Pense em todos os diferentes campos de entrada que requer uma estrutura formatada. Números de telefone, cartões de crédito, datas de nascimento, endereços ... todos eles têm padrões únicos.
É fácil deixar esses campos em paz e confiar no usuário. Mas pode ser melhor usar Cleave.js, uma plug-in JavaScript vanilla gratuito para ajudá-lo Formatar automaticamente os campos de entrada.
HTML5 vem com o seu próprio conjunto de entradas relacionadas a padrões de dados como números de telefone. Com Cleave, você pode levar isso para o próximo nível com Entradas customizadas naquela formatar automaticamente o texto como é digitado.
Por padrão, o plugin suporta cinco padrões básicos de texto:
- Números de cartão de crédito
- Números de telefone
- datas
- Estilo numérico (com vírgulas)
- Campos de entrada personalizados
Essa última escolha é a mais legal porque você pode fazer o seu padrões de dados personalizados próprios a partir do zero. Cleave não o força a seguir qualquer metodologia rígida.
Em vez disso, dá-lhe as ferramentas para construa suas próprias entradas com suporte opcional para componentes React e Angular. Ele também suporta todos os principais navegadores e deve corresponder ao suporte para navegadores legados junto com jQuery.
Note que este não é um plugin difícil de configurar. Você alvo qualquer ID ou classe que você tem no seu campo de entrada e passar isso para uma nova instância Cleave. Aqui está um trecho de amostra:
var cleave = new Cleave ('. input-phone', phone: verdadeiro, phoneRegionCode: 'country'); No entanto, enquanto Cleave pode ser fácil de configurar, tem muitos recursos personalizados você pode brincar com.
Toda a documentação é hospedado dentro do repo, então você precisará navegar na página do GitHub para encontre todos os diferentes métodos e opções. Especificamente, o página de opções tem muito o que fazer e pode demorar um pouco para encontrar o que você quer.
Felizmente, Cleave tem muitos exemplos ao vivo você pode estudar e replicar. Esses exemplos também são grátis para baixar do repositório do GitHub. Se você quiser ver mais exemplos ao vivo visite a Cleave.js home page ou confira este violino repleto de demonstrações.
