Formater automatiquement les champs de saisie avec Cleave.js
Pensez à tous les différents champs de saisie qui nécessite une structure formatée. Les numéros de téléphone, les cartes de crédit, les dates de naissance, les adresses des rues… ont tous leur propres modèles uniques.
Il est assez facile de laisser ces champs seuls et de faire confiance à l'utilisateur. Mais il serait peut-être préférable d'utiliser Cleave.js, une plugin JavaScript gratuit à la vanille pour vous aider formater automatiquement les champs de saisie.
HTML5 est livré avec son propre ensemble d'entrées liées aux modèles de données tels que les numéros de téléphone. Avec Cleave, vous pouvez passer au niveau supérieur avec entrées personnalisées cette formater automatiquement le texte comme il est tapé.
Par défaut, le plugin supporte cinq modèles de texte de base:
- Numéros de carte de crédit
- Les numéros de téléphone
- Rendez-vous
- Style numérique (avec des virgules)
- Champs de saisie personnalisés
Ce dernier choix est le plus cool car vous pouvez faire votre propres modèles de données personnalisés à partir de zéro. Cleave ne vous oblige pas à suivre une méthodologie stricte.
Au lieu de cela, il vous donne les outils pour construire vos propres entrées avec support optionnel pour les composants React et Angular. Il soutient également tous les principaux navigateurs et devrait correspondre au soutien pour anciens navigateurs de même que jQuery.
Notez que ce n'est pas un plugin difficile à configurer. Vous cible quel que soit l'ID ou la classe que vous avez sur votre champ de saisie et passer cela dans une nouvelle instance Cleave. Voici un extrait de code:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'pays'); Cependant, bien que Cleave soit facile à configurer, il a beaucoup de fonctionnalités personnalisées vous pouvez jouer avec.
Toute la documentation est hébergé à l'intérieur du repo, vous aurez donc besoin de parcourir la page GitHub pour trouver toutes les différentes méthodes et options. Plus précisément, le page d'options a beaucoup à parcourir et peut prendre un certain temps pour trouver ce que vous voulez.
Heureusement, Cleave a beaucoup d'exemples en direct vous pouvez étudier et reproduire. Ces exemples sont aussi gratuit à télécharger du repo GitHub. Si tu veux voir plus d'exemples en direct visiter le Cleave.js page d'accueil ou check out ce violon bourré de démos.
