Share
Dans ce didacticiel, vous apprendrez à formater, en temps réel, les entrées utilisateur dans un champ de formulaire. Lorsqu'un utilisateur tape quelque chose dans un champ de saisie, la valeur est ajustée automatiquement, en ajoutant des éléments tels que la ponctuation et les tirets, le rognage des espaces, la suppression des caractères inattendus et la modification de la casse des mots..
Cette approche peut grandement faciliter la tâche des utilisateurs lors de la saisie de données de formulaire. Cela facilite le processus, minimise les erreurs, donne un retour d'information et améliore généralement l'expérience utilisateur.
Nous allons explorer deux exemples, en utilisant jQuery pour les API, les méthodes et les utilitaires afin de rendre l'écriture du code plus pratique et intuitive. Avoir une compréhension de base de jQuery vous aidera, même si vous devriez être capable de comprendre ce qui se passe, même si ce n'est pas le cas. Commençons!
Vérifiez le stylo de démarrage, fourchez-le et suivez-le. Il contient un texte champ de saisie, avec quelques styles pour le rendre présentable. L'onglet JS est vide, mais jQuery a déjà été ajouté à la et est prêt à partir!
Et comme vous pouvez le voir ci-dessous, notre contribution attend une somme d’argent. Ce type de champ de saisie se trouve généralement dans un formulaire bancaire, de traitement de paiement ou de change..
J'ai rencontré fréquemment deux problèmes avec ce type de saisie:
Pour commencer à formater la valeur d’entrée, nous sélectionnons le contribution élément, affectant le résultat à une variable.
Accentsconagua
var $ form = $ ("#form"); var $ input = $ form.find ("input");Ensuite, nous attachons le keyup événement à notre entrée; Activer une fonction lorsque l'utilisateur appuie puis relâche une touche du clavier.
$ input.on ("keyup", function (event) // 1. var selection = window.getSelection (). toString (); if (selection! == ") return; // // si ($ .inArray (event.keyCode, [38,40,37,39])! == -1) return;);Dans cette fonction, nous ajoutons également quelques lignes de code. Ces lignes supplémentaires empêchent la fonction de s'exécuter lorsque l'utilisateur
Dans ces deux scénarios, aucun nouveau caractère n'est ajouté, il n'est donc pas nécessaire de continuer à exécuter la fonction..
Ensuite, toujours dans notre fonction, sous la section empêchant les touches de direction d’exécuter la fonction, nous ajoutons ce qui suit. C'est la fonction principale qui formatera la valeur.
// 1 var $ this = $ (this); var input = $ this.val (); // 2 var input = input.replace (/ [\ D \ s \ ._ \ -] + / g, ""); // 3 entrée = entrée? parseInt (entrée, 10): 0; // 4 $ this.val (function () return (input === 0)? "": Input.toLocaleString ("en-US"););Ces lignes effectuent ce qui suit:
parseInt () fonction pour vous assurer que la valeur est un entier (un nombre rond).toLocaleString () fonction, puis renvoie la valeur assainie à l'élément d'entrée.Remarque: Le séparateur peut être soit , ou . en fonction du code de pays transmis dans le toLocaleString () une fonction. allemand, de-DE, et l'Indonésie, J'ai fait, par exemple, utilisez . au lieu de ,.
Essayez la démo!
Au fur et à mesure que vous tapez sur l'entrée, vous devriez constater que les lettres et les caractères spéciaux (tels que tiret et point) seront immédiatement supprimés. Vous ne pourrez entrer qu'un numéro. Le séparateur de milliers sera automatiquement ajouté.
Le «numéro de licence» est un autre type d’apport pour lequel il est logique d’appliquer cette approche.contribution. Le numéro de licence ou le code d’achat d’Envato Market, par exemple, comporte 36 caractères et comprend des lettres, des chiffres et quelques tirets. Il est essentiel de le saisir correctement sur les sites Web d'auteurs si vous avez besoin d'assistance.!
D'où vient mon code d'achat?Vous pouvez également trouver ce type de saisie dans un thème ou un plug-in WordPress premium, où vous devez saisir un code de licence pour recevoir les mises à jour ou utiliser des fonctionnalités particulières..
Dans ce deuxième exemple, nous avons créé un champ de saisie avec un texte fictif indiquant le format du numéro de licence. Et comme vous pouvez le voir ci-dessous, le numéro de licence comprend 32 caractères avec plusieurs tirets entre eux, et chaque caractère doit être mis en majuscule..
Voici le stylo de départ; fourchette et suivre!
Nous allons partager la même base de code que notre premier exemple, à l'exception de la fonction principale.
// 1 var $ this = $ (this); var input = $ this.val (); // 2 input = input.replace (/ [\ W \ s \ ._ \ -] + / g, "); // 3 var split = 4; var chunk = []; pour (var i = 0, len = longueur.entrée; i < len; i += split) split = ( i >= 8 && i <= 16 ) ? 4 : 8; chunk.push( input.substr( i, split ) ); // 4 $this.val(function() return chunk.join("-").toUpperCase(); ); La fonction principale, dans ce cas:
Notre numéro de licence est maintenant prêt! Essayez:
Regardez cette démo de Donnie D'Amato, une entrée pour les dates de formatage:
Merci Donnie!
Dans ce didacticiel, nous avons présenté deux exemples de formatage automatique des entrées utilisateur, offrant à nos utilisateurs une expérience plus transparente..
Cette approche est applicable à tout type de saisie de texte. Vous pouvez, par exemple, l'appliquer à une entrée «nom d'utilisateur» pour vous assurer que toutes les lettres sont en minuscules et ne contiennent que des lettres. Vous pouvez également l’utiliser pour formater une entrée «Prénom et nom», en veillant à ce que la première lettre soit en majuscule..
Pour envoyer correctement le formulaire et sécuriser les données, veuillez contacter vos sympathiques développeurs back-end..
