Comment saisir un numéro de téléphone dans le formulaire. Masquage et validation du champ du téléphone à l'aide de jQuery. Création d'un masque de saisie HTML

Ce plugin jQuery vous permet de sélectionner automatiquement le masque de saisie approprié en fonction du début saisi du numéro de téléphone. Cela vous permet de rendre la saisie d'un numéro de téléphone sur une page de site Web plus rapide et sans erreur. De plus, le plugin développé peut être utilisé dans d'autres domaines si les règles de saisie peuvent être représentées sous la forme de plusieurs masques de saisie.

Introduction Les sites Web nécessitent la saisie d'informations sur un numéro de téléphone. Il se trouve que chaque pays a le droit d'établir ses propres règles de numérotation et la longueur du numéro, ce qui entraîne périodiquement une confusion entre les résidents de différents pays : certains ont l'habitude d'indiquer le numéro avec le chiffre initial 8, d'autres avec le chiffre initial 8. chiffre 0, et d'autres encore avec un signe + Revoir les solutions existantes Afin de résoudre d'une manière ou d'une autre la complexité apparue et d'amener les nombres à un format unifié, il existe 3 solutions principales :

L'utilisateur est invité à saisir le numéro à l'aide d'un masque de saisie. Avantage : L'affichage clair du numéro minimise les erreurs possibles dans le numéro. Inconvénient : chaque pays a sa propre orthographe et sa propre longueur de numéro.

L'utilisateur est invité à sélectionner le pays séparément et à saisir le reste du numéro séparément ; possible à l'aide d'un masque de saisie. Avantage : la possibilité d'utiliser différents masques de saisie pour différents pays (ainsi que régions au sein d'un pays). Inconvénients : la liste des pays (et des régions au sein de chaque pays) peut être longue ; le numéro de téléphone cesse d'exister dans son ensemble (ou un prétraitement est requis avant d'enregistrer et d'afficher le numéro).

Placez un signe + devant le numéro (en dehors de la saisie) et autorisez la saisie de seuls chiffres. Avantages : facilité de mise en œuvre. Inconvénient : manque d'affichage visuel du numéro.

Solution proposée En conséquence, il a été décidé de modifier le masque de saisie habituel afin qu'il change en fonction de la valeur actuelle du nombre. De plus, au fur et à mesure que vous saisissez le numéro, vous êtes invité à afficher le nom du pays identifié. Cette approche, subjectivement, devrait résoudre toutes les lacunes des solutions énumérées ci-dessus.

Compte tenu du fait que le nombre de pays dans le monde est relativement petit, il a été décidé de dresser une liste de masques de saisie pour tous les pays. Les informations publiées sur le site Internet de l'Union internationale des télécommunications ont été utilisées comme source.

La collecte de ces informations a apporté de nombreuses surprises. Lors du processus de collecte d'informations, il était nécessaire de prendre en compte toutes les options possibles en matière de numéros de téléphone, y compris à l'intérieur du pays. Cependant, en raison de la grande quantité d'informations traitées manuellement, il est possible que des inexactitudes subsistent dans la base de données collectée. Il est prévu d'apporter des corrections à l'ensemble initial au fil du temps.

Implémentation logicielle L'implémentation de jquery.inputmask, qui a été mentionnée à plusieurs reprises sur Habrahabr, a été utilisée comme noyau du masque de saisie. Ce plugin est actuellement activement développé et, de plus, est conçu de telle manière qu'il est assez simple d'écrire des extensions pour celui-ci. Cependant, dans ce problème, il s’est avéré presque impossible d’écrire une telle extension. Je n'ai pas modifié ni réécrit le plugin d'origine pour l'adapter à mes besoins, car... son auteur continue de travailler activement à l'extension des fonctionnalités, ce qui peut rendre problématique l'application de mes modifications. Par conséquent, j'ai dû écrire un plug-in complémentaire sur le noyau principal, qui surveille (et intercepte) les influences externes et apporte des modifications aux données. Afin d'implémenter nos gestionnaires d'influence externes avant les gestionnaires du plugin principal, nous avons utilisé le plugin de bibliothèque jquery.bind-first. Tri des masques de saisie autorisés Pour sélectionner correctement le masque de saisie le plus approprié, l'ensemble des masques doit d'abord être trié dans un format spécial. chemin. Lors de l'élaboration des règles de tri, les conventions suivantes ont été adoptées :

Tous les caractères du masque de saisie sont divisés en 2 types : les caractères significatifs (dans mon cas, il s'agit du symbole #, signifiant un nombre arbitraire, et les chiffres 0 à 9) et les caractères décoratifs (tous les autres).

Une autre division de caractères dans le masque de saisie est constituée des caractères génériques (dans mon cas, le symbole #) et de tous les autres.

Le résultat est les règles de tri suivantes dans l'ordre dans lequel elles sont appliquées :

Lors de la comparaison de 2 masques de saisie caractère par caractère, seuls les caractères significatifs (pas les décorateurs) sont pris en compte.

Différents caractères génériques sont traités comme égaux et les autres caractères significatifs sont comparés en fonction de leur code.

Les symboles hors modèle sont toujours plus petits que les symboles modèles et, par conséquent, sont positionnés plus haut.

Plus la longueur des caractères significatifs dans le masque de saisie est courte, plus le masque de saisie est considéré comme petit et est positionné plus haut.

Trouver un masque de saisie approprié Lors de la comparaison du texte saisi avec le masque suivant de la liste triée, seuls les caractères significatifs de chaque masque sont pris en compte. Si une ligne est plus longue qu'un masque de saisie même si tous les caractères précédents ont réussi le test, le masque de saisie est considéré comme non valide. Si le texte saisi correspond à plusieurs masques de saisie, le premier est renvoyé. Ensuite, dans le masque trouvé, tous les caractères significatifs (y compris ceux qui ne sont pas des modèles) sont remplacés par un modèle, qui est une combinaison de tous les caractères autorisés par l'un des caractères du modèle. Traitement et interception des événements Afin d'éviter les conflits avec. gestionnaires d'événements du noyau principal du masque de saisie, les événements suivants sont interceptés :

keydown - les frappes de retour arrière et de suppression sont surveillées pour modifier le masque de saisie actuel avant que le gestionnaire principal ne supprime un caractère du texte. De plus, l'appui sur la touche Inser, qui modifie le mode de saisie de texte, est surveillé pour la synchronisation.
pression sur une touche - puisque le caractère saisi peut ne pas être autorisé par le masque de saisie d'origine (puisque tous les caractères significatifs qu'il contient sont remplacés par un caractère générique), il est nécessaire de vérifier la nouvelle ligne pour satisfaire l'un des masques autorisés. S'il n'existe pas de tels masques, alors la saisie de caractères est ignorée ; sinon, le masque de saisie est mis à jour, après quoi l'événement est transmis au gestionnaire du noyau.
coller, saisir - coller le texte du presse-papiers. Avant de transférer le traitement vers le noyau, un masque de saisie est sélectionné pour la ligne résultant du collage du texte depuis le presse-papiers. Si le masque de saisie est introuvable, le texte est coupé caractère par caractère à partir de la fin jusqu'à ce que le texte corresponde à au moins un masque de saisie. Une opération similaire est effectuée lors de la correction du texte dans un champ de saisie en appelant la fonction val(), ainsi que lors de l'initialisation d'un masque de saisie s'il est appliqué à un champ de saisie non vide.
dragdrop , drop - le traitement est similaire à l'événement coller.
flou - traitement supplémentaire dans le cas où le mode d'effacement du texte est activé lorsque le focus est perdu s'il ne satisfait pas le masque de saisie. Cet événement est intercepté après le gestionnaire principal, contrairement aux précédents.

Tous les événements sont suspendus dans l'espace inputmask. Cela évite un comportement incorrect lors de l'appel de inputmask après l'initialisation du complément (puisque le noyau supprime tous les gestionnaires précédemment installés dans l'espace inputmask lors de l'initialisation).

Exemple d'utilisation Format de liste de masques Une liste de masques est un tableau JavaScript d'objets, de préférence avec le même ensemble de propriétés. Au moins une propriété contenant un masque de saisie doit être présente pour tous les objets tableau. Le nom du paramètre contenant le masque peut être arbitraire. Vous trouverez ci-dessous un fragment d'un tel tableau :
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Russie", "desc_en": "", " name_ru": "Russie", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_fr": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc " : "SA", "name_en": "Arabie Saoudite", "desc_en": "mobile", "name_ru": "Arabie Saoudite", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Arabie Saoudite", "desc_en": "", "name_ru": "Arabie Saoudite", "desc_ru": " " ), … ] Paramètres de connexion du plugin Avant de vous connecter, vous devez charger et trier la liste des masques. Cela se fait en exécutant la fonction suivante :
$.masksSort = fonction (maskList, defs, match, key)

maskList - un tableau d'objets stockant des masques de saisie (fragment d'objet voir ci-dessus) ;
defs - un tableau de caractères génériques (dans mon cas, c'est le symbole #) ;
match - une expression régulière décrivant les caractères significatifs (dans mon cas, il s'agit de /|#/) ;
key est le nom du paramètre de l'objet tableau contenant le masque de saisie.

Une fois connecté, le plugin reçoit un objet spécial qui décrit son fonctionnement. Cet objet contient l'ensemble de paramètres suivant :

inputmask - un objet contenant des paramètres transmis au plugin inputmask principal ;
match - une expression régulière décrivant les caractères significatifs, à l'exclusion des caractères génériques ;
remplacer - un caractère générique par lequel tous les caractères significatifs seront remplacés ; peut ne pas être présent dans l'objet de définitions de l'objet inputmask ;
list - un tableau d'objets décrivant les masques de saisie ;
listKey - nom du paramètre à l'intérieur de l'objet stockant le masque de saisie ;
onMaskChange - une fonction appelée lorsque le masque de saisie est mis à jour ; le premier paramètre est un objet du tableau dont le masque de saisie correspond au texte saisi, et le deuxième paramètre est la précision de la définition du masque : vrai - le masque de saisie correspond complètement, faux - des caractères supplémentaires doivent être saisis pour être fiables définir le masque.

Pour initialiser le plugin, vous devez appliquer la méthode inputmasks au champ de saisie :
$.fn.inputmasks = fonction (maskOpts, mode)

maskOpts - un objet décrivant le fonctionnement du plugin ;
mode - facultatif ; actuellement, la valeur isCompleted est prise en charge - par conséquent, la méthode renvoie vrai si le texte correspondant au masque correspondant est saisi complètement et faux dans le cas contraire.

Exemple de connexion de plugin
Masque de saisie var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask");

var maskOpts = ( inputmask : ( définitions : ( "#": ( validateur : "", cardinalité : 1 ) ), //clearIncomplete : true, showMaskOnHover : false, autoUnmask : true ), match : //, remplacer : "# ", list : maskList, listKey : "mask", onMaskChange : function(maskObj, terminé) ( if (completed) ( var soupçon = masqueObj.name_ru; if (maskObj.desc_ru && masqueObj.desc_ru != "") ( conseil + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(indice); autre ( $("#descr").html("Masque de saisie"); ) $(this ) .attr("placeholder", $(this).inputmask("getemptymask") );

$("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[####################]", maskOpts.inputmask) .attr("placeholder", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Masque de saisie"); ) ));

$("#phone_mask").change();

Le site étant spécialisé dans les candidatures, le champ de saisie d'un numéro sur le site était facultatif. Pour suivre l'évolution du pourcentage de clients remplissant le champ « téléphone » du formulaire de commande du site, nous avons utilisé une variable personnalisée dans Google Analytics. En février, aucun des neuf clients n'a renseigné le champ « téléphone ». En mars, nous avons introduit un masque de saisie et les utilisateurs ont commencé à le remplir. Pour la pureté de l’expérience, le champ est resté facultatif et aucune autre modification n’a été apportée.
Le résultat pour mars était de 19 numéros avec 22 utilisateurs remplissant la demande. Autrement dit, 85 % des utilisateurs ayant commandé l’application ont laissé leur numéro de téléphone.

Étude de cas du site Web du centre d'information : augmentation du nombre de saisies dans les champs de numéro de téléphone de 15,4 %

Le site Web du client fournit des services de rédaction d’essais, de cours, de mémoires et d’autres travaux. Le numéro de téléphone de l'utilisateur est souhaitable pour la communication, mais sur le site ce champ était facultatif. L'utilisateur ne pouvait pas remplir le formulaire ni écrire quoi que ce soit dans ce champ. Pour la première fois, dans un premier temps, nous avons mis en place un suivi pour remplir le champ « téléphone » dans Google Analytics. En novembre, sur 59 candidatures déposées par les visiteurs du site, 15 ne contenaient pas de numéro. Autrement dit, l'entreprise n'a reçu que 74,6 % des formulaires soumis avec un numéro complété. Nous avons ensuite ajouté un masque de saisie au champ du téléphone. En décembre, le site a reçu 60 candidatures. De plus, seuls 6 formulaires remplis ne contenaient pas le numéro de téléphone du client. Ainsi, 90 % des bons de commande transmis contenaient un champ téléphonique correctement renseigné. Sur le mois - une augmentation de 15,4%, uniquement grâce à l'introduction d'un masque de saisie du numéro. Enfin, une étude de cas interne de l'agence.

Le champ des numéros dans le formulaire de commande sur le site Web Netpeak est également facultatif. Mais les numéros de téléphone sont importants pour que les clients connaissent toujours le numéro et l'état de leur demande (nous envoyons ces données par SMS), ainsi que pour optimiser le travail des chargés de comptes. La durée de l'expérimentation, comme dans les exemples précédents, est de deux mois. Suite à l'apparition du masque de saisie du numéro, le pourcentage de formulaires remplis est passé de 44 % à 83 % - de 39,4 %.
Après l'expérimentation, nous avons implanté le masque sur le site. Le champ de saisie d'un numéro reste facultatif. La demande ne sera pas traitée uniquement si un numéro incorrect est saisi dans ce champ. Dans ce cas, les premiers chiffres du masque changent en fonction du pays dans lequel se trouve l'utilisateur du site. Si nous parlons d'un formulaire de précommande, alors il est intéressant de savoir à quel point les applications avec numéros de téléphone sont de meilleure qualité. Nous avons pris tous les leads reçus via le formulaire de précommande et calculé le pourcentage de ceux qui se sont convertis en clients sans et avec un numéro. Ce dernier s'est avéré être le plus important de 0,81%.

Conclusion : si une personne vous laisse son numéro sur le formulaire, cela ne garantit pas le transfert de fonds.

Si nous parlons du formulaire de précommande, les possibilités de réactivation des clients apparaissent, des opportunités qui s'ouvrent aux spécialistes du marketing armés d'une base de données des numéros de téléphone personnels des utilisateurs. Nous parlerons de cas de réactivation réussis dans l'un de nos nouveaux articles. En attendant, nous vous conseillons de prendre connaissance des mesures à prendre avant toute action concernant les numéros de téléphone dans la base de données. Partagez dans les commentaires votre expérience de mise en place d'un masque de saisie des numéros de téléphone et vos observations sur la qualité des candidatures entrantes.