Comment créer un sélecteur de numéro de téléphone simple
Les numéros de téléphone, Outre les noms et les adresses électroniques, les informations de contact les plus fréquemment utilisées dans les formulaires en ligne. Les champs de numéro de téléphone sont généralement conçus de manière à obliger les utilisateurs à saisir les numéros à l'aide de leurs claviers. Cette méthode entraîne fréquemment une saisie de données inexacte.
À réduire les erreurs de saisie de l'utilisateur et améliorer l'expérience utilisateur de votre site, vous pouvez créer un Interface graphique qui permet aux utilisateurs d'entrer rapidement leur numéro de téléphone, d'une manière similaire aux sélecteurs de date.
Dans ce tutoriel, vous verrez comment ajouter un sélecteur de numéro de téléphone simple à un champ de saisie. Nous utiliserons HTML5, CSS3 et JavaScript pour accéder à l'interface graphique que vous pouvez voir et tester dans la démo ci-dessous. Nous allons également utiliser des expressions régulières pour nous assurer que les utilisateurs entrent réellement un numéro de téléphone valide..
1. Créez le champ Numéro de téléphone
Premier, créer un champ de saisie avec une icône de numérotation à droite qui ouvrira l’écran de numérotation au clic. L’icône du cadran ressemble à 9 cases noires, disposées 3 par 3, doit ressembler à ce que vous voyez sur un téléphone ordinaire.
J'utilise le tel type d’entrée pour une sémantique HTML5 correcte, mais vous pouvez également utiliser la texte type d'entrée si vous voulez.
2. Créer l'écran de numérotation
le écran de numérotation est une grille de nombres de 0 à 9 plus quelques caractères spéciaux. Il peut être fait avec soit un HTML Ici, je vais vous montrer comment créer le tableau d’écran de numérotation en JavaScript. Vous pouvez bien sûr ajouter le tableau directement dans le code source HTML si vous le préférez de cette façon.. Tout d'abord, créez un nouveau Ajouter un Les deux La dernière ligne est différente, car elle consiste en deux caractères spéciaux, Pour créer la dernière ligne de l’écran de numérotation, ajoutez les éléments suivants: le l'écran de numérotation est maintenant complet, ajoutez-le à la Pour le rendre plus attrayant, styliser l'écran de numérotation avec CSS. Vous n'êtes pas obligé de rester avec mon style, mais n'oubliez pas de ajouter Tout d'abord, ajoutez le Ajoutez ensuite un gestionnaire d’événements click à l’icône de numérotation. avec JavaScript à basculer la visibilité de l'écran de numérotation. Pour ce faire, vous devez utiliser ce qui précède le Ajouter une fonction personnalisée qui saisit des chiffres dans le champ du numéro de téléphone sur le clic des cellules de l'écran de numérotation. le Maintenant, vous avez un écran de travail pour saisir le champ du numéro de téléphone. Pour suivre le CSS, changez la couleur d’arrière-plan des chiffres dans leur Ajouter un validation de regex simple pour valider le numéro de téléphone pendant que l'utilisateur entre les chiffres dans le champ de saisie. Selon les règles de validation que j'utilise, le numéro de téléphone ne peut commencer que par un chiffre ou le Vous pouvez voir la visualisation de mon expression régulière sur le diaporama ci-dessous créé avec l'application Debuggex. Vous pouvez également valider le numéro de téléphone selon le format de numéro de téléphone de votre pays ou région.. Créez un nouvel objet d’expression régulière et stockez-le dans le dossier Lorsque l'entrée ne valide pas, le je suis ajout d'une bordure rouge dans le champ de saisie lorsque la saisie est invalide, mais vous pouvez informer l'utilisateur de différentes manières, par exemple, avec des messages d'erreur. le Notez que j'ai aussi ajouté un validation supplémentaire pour un maximum de caractères (ne peut pas dépasser 15) en utilisant un Votre sélecteur de numéro de téléphone est maintenant prêt, consultez la démo finale ci-dessous. ou JavaScript.
'table' élément dans le DOM en utilisant le createElement () méthode. Donne-lui aussi le 'cadran' identifiant. / * Créer un écran de numérotation * / var dial = document.createElement ('table'); dial.id = 'dial'; pour boucle insérer les quatre lignes de la table de numérotation avec. Ensuite, pour chaque rangée, courir un autre pour boucle afin d'ajouter trois cellules par ligne. Marquez chaque cellule avec le 'dialDigit' classe. pour (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
pour Les boucles ci-dessus calculent les chiffres qui entrent dans les cellules du tableau de numérotation - les valeurs de cell.textContent propriété - de la manière suivante: (colNum + 1) + (rangNum * 3) / * première rangée * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * deuxième ligne * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- et + qui sont utilisés dans les formats de numéro de téléphone pour identifier les codes régionaux, et le chiffre 0.si déclaration à l'intérieur pour boucle. pour (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper Conteneur HTML créé à l'étape 1 à l'aide de deux méthodes DOM:querySelector () méthode pour sélectionnez le conteneurappendChild () méthode pour ajouter l'écran de numérotation - tenue dans le cadran variable - au conteneur document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Style l'écran de numérotation
sélection de l'utilisateur: aucune; propriété à la #cadran récipient de sorte que lorsque l'utilisateur clique sur les chiffres, le texte ne sera pas sélectionné par le curseur. #dial width: 200px; hauteur: 200px; effondrement de la bordure: effondrement; text-align: center; position: relative; -ms-user-select: none; -webkit-user-select: aucun; -moz-user-select: aucun; sélection de l'utilisateur: aucune; couleur: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; curseur: pointeur; couleur de fond: rgba (255,228,142, .7);
4. Afficher l'écran de numérotation au clic
visibilité: cachée; règle de style à #cadran dans le CSS ci-dessus à cacher l'écran de numérotation par défaut. il ne sera affiché que lorsque l'utilisateur clique sur l'icône de composition.querySelector () et le addEventListener () méthodes. Le dernier attache un événement de clic à l'icône de numérotation et appelle la coutume toggleDial () une fonction.toggleDial () une fonction change la visibilité de l'écran de numérotation de masqué à visible et retour. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); fonction toggleDial () dial.style.visibility = dial.style.visibility === 'masqué' || dial.style.visibility === "? 'visible': 'caché'; 5. Ajouter la fonctionnalité
composer le numéro() une fonction ajoute les chiffres un par un au textContent propriété du champ de saisie marqué avec le #pas de téléphone identifiant. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); pour (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :flotter et :actif (lorsque l'utilisateur clique dessus) déclare. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Ajouter la validation des expressions régulières
+ caractère, et accepter le - personnage ensuite.
modèle variable. Créez également une coutume valider() fonction qui vérifie si le numéro de téléphone entré se conforme à l'expression régulière, et si c'est au moins 8 caractères.valider() la fonction doit faire des commentaires à l'utilisateur. pattern = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); function validate (txt) // au moins 8 caractères pour un numéro de téléphone valide. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Effectuer la validation
valider() les fonctions doit être appelé afin d'effectuer la validation. Appelez ça du composer le numéro() la fonction que vous avez créée à l’étape 5 afin de valider la valeur du pas de téléphone variable.si déclaration. function dialNumber () var val = phoneNo.value + this.textContent; // maximum de caractères autorisés, 15 if (valeur.length> 15) renvoie false; valider (val); phoneNo.value = val;
