hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Formater les champs de saisie automatiquement avec Cleave.js

Pensez à tous les différents champs de saisie qui nécessitent une structure formatée . Les numéros de téléphone, les cartes de crédit, les dates de naissance, les adresses de rue ... ils ont tous leurs propres modèles uniques .

Il est assez facile de laisser ces champs tranquilles et de faire confiance à l'utilisateur. Mais il pourrait être préférable d'utiliser Cleave.js, un plugin JavaScript gratuit pour vous aider à formater automatiquement les champs de saisie .

HTML5 est livré avec son propre ensemble d'entrées liées à des modèles de données tels que les numéros de téléphone. Avec Cleave, vous pouvez passer au niveau supérieur avec des entrées personnalisées qui mettent en forme automatiquement le texte lorsqu'il est tapé.

Par défaut, le plugin prend en charge cinq modèles de texte de base :

  1. Numéros de carte de crédit
  2. Les numéros de téléphone
  3. Rendez-vous
  4. Style numérique (avec des virgules)
  5. Champs de saisie personnalisés

Ce dernier choix est le plus cool parce que vous pouvez créer vos propres modèles de données personnalisés à partir de zéro . Cleave ne vous force pas à suivre une méthodologie stricte.

Au lieu de cela, il vous donne les outils pour construire vos propres entrées avec un support optionnel pour les composants React et Angular . Il prend également en charge tous les principaux navigateurs et devrait correspondre à la prise en charge des navigateurs hérités avec jQuery .

Notez que ce n'est pas un plugin difficile à mettre en place. Vous ciblez l'ID ou la classe que vous avez dans votre champ de saisie et transmettez-le dans une nouvelle instance de Cleave . Voici un exemple d'extrait:

 var cleave = new Cleave ('. input-phone', {téléphone: vrai, phoneRegionCode: '{country}'}); 

Cependant, si Cleave peut être facile à configurer, il a beaucoup de fonctionnalités personnalisées que vous pouvez jouer avec.

Toute la documentation est hébergée dans le repo, vous devez donc parcourir la page GitHub pour trouver toutes les différentes méthodes et options . Plus précisément, la page d'options a beaucoup de chemin à parcourir et peut prendre un certain temps pour trouver ce que vous voulez.

Heureusement, Cleave a beaucoup d'exemples vivants que vous pouvez étudier et reproduire. Ces exemples peuvent également être téléchargés gratuitement depuis le dépôt GitHub. Si vous voulez voir plus d'exemples en direct, visitez la page d'accueil Cleave.js ou consultez ce violon bourré de démos.

Comment tester le site Web sur plusieurs navigateurs et périphériques de manière synchrone

Comment tester le site Web sur plusieurs navigateurs et périphériques de manière synchrone

Responsive Web Design (RWD) est maintenant une approche commune dans la construction d'un site Web mobile amical. Mais construire un site Web réactif peut être assez énervant quand vous devez tester le site Web dans plusieurs appareils et tailles d'écran.Supposons que vous ayez trois périphériques pour effectuer le test, vous devrez peut-être constamment actualiser chaque navigateur dans chacun de ces périphériques, ce qui est fastidieux, c'est le moins qu'on puisse dire.L'id

(Conseils techniques et de conception)

20 châteaux de la vie réelle tout droit sorti des contes de fées

20 châteaux de la vie réelle tout droit sorti des contes de fées

Dans les contes de fées et les histoires au coucher, nous entendons parler de magnifiques châteaux construits sur les hauteurs. Cependant, il y a quelques châteaux de la vie réelle dans différents pays qui semblent être tout droit sorti des contes de fées .Il y a tellement de châteaux incroyables partout dans le monde qu'il était assez difficile de choisir les meilleurs. Néanmoi

(Conseils techniques et de conception)