L'une des tâches les plus courantes. Soit vous souhaitez protéger le formulaire contre la saisie de guillemets et de barres obliques, soit vous souhaitez une translittération instantanée. Alors, comment pouvez-vous autrement mettre le contenu du formulaire dans l’ordre souhaité côté client ?
Comment interdire la saisie de certains caractères ou les remplacer dans un champ ou une zone de texte JS ? La logique est simple - nous créons le premier tableau avec les caractères que nous voulons remplacer, puis le second - avec ceux que nous insérons à la place des premiers. Total : deux tableaux avec le même (!) nombre d'éléments.
var transChars = new Array(""",""");
{
var from = nomForm;
Var à = "";
var len = from.length;
caractère var, isRus ;
pour (var je = 0; je< len; i++)
{
estRus = faux ;
pour (var j = 0; j< rusChars.length; j++)
{
{
estRus = vrai ;
casser;
}
}
}
}
Vous pouvez remplir les tableaux avec vos propres symboles de remplacement. Tout ce dont vous avez besoin! Vous trouverez ci-dessous des exemples.
Si l'on souhaite remplacer, par exemple, l'alphabet cyrillique par des caractères latins, ou, plus simplement, effectuer une translittération instantanée) Regardez ci-dessous :
Var rusChars = new Array("A","a","B","b","C","c","D","g","D","d","E", "e", "Ё", "e", "Zh", "zh", "Z", "z",
"Sh", "sh", "Shch", "shch", "E", "e", "Yu", "yu", "Ya", "ya", "Y", "y", "b " ","b");
"sh", "sh", "csh", "csh", "e", "e", "u", "u", "ya", "ya", "i", "i", " ,"");
Si nous voulons remplacer certains caractères dans un champ - guillemets simples et doubles par une apostrophe, qui, une fois enregistrés dans la base de données, ne nous permettront pas de recevoir des données incorrectes).
Var rusChars = new Array(""","\"");
var transChars = new Array(""",""");
Onblur="convert("nom du formulaire", "d'où nous le modifions", "où nous insérons celui remplacé");"
Eh bien, vous trouverez ci-dessous un exemple de travail avec des fichiers et de visualisation de démos !
Remplacer certains caractères dans le champ de saisie à l'aide de JS
var rusChars = new Array("A", "a", "B", "b", "C", "c", "D", "g", "D", "d", "E", "e", "Ё", "e", "Zh", "zh", "Z", "z",
"Je", "i", "Y", "y", "K", "k", "L", "l", "M", "m", "N", "n", "O " ","o", "P", "p",
"R", "r", "S", "s", "T", "t", "U", "u", "F", "f", "X", "x", "H " ","ch", "Ts", "ts",
"Sh", "sh", "Shch", "shch", "E", "e", "Yu", "yu", "Ya", "ya", "Y", "y", "b " ","b",""","\"");
var transChars = new Array("a", "a", "b", "b", "v", "v", "g", "g", "d", "d", "e", "e", "jo", "jo", "zh", "zh", "z",
"i", "i", "y", "y", "k", "k", "l", "l", "m", "m", "n", "n", "o ","o","p","p",
"r", "r", "s", "s", "t", "t", "u", "u", "f", "f", "h", "h", "ch ","ch","ts","ts",
"sh", "sh", "csh", "csh", "e", "e", "u", "u", "ya", "ya", "i", "i", " ,"","","");
Fonction convert(the_form, conv_froms, conv_to)
{
var nomForm = document.forms.value;
var from = nomForm;
Var à = "";
var len = from.length;
caractère var, isRus ;
pour (var je = 0; je< len; i++)
{
caractère = from.substr(i,1);
estRus = faux ;
pour (var j = 0; j< rusChars.length; j++)
{
si (caractère == rusChars[j])
{
estRus = vrai ;
casser;
}
}
à += (estRus) ? transChars[j] : caractère;
}
document.forms.value = à ;
}
Immédiatement dans un champ
De l'un à l'autre
Le script ci-dessous vous permettra de vérifier que le champ est correctement renseigné. Cela limitera la saisie de certains caractères dans le champ de saisie de texte.
La vérification des caractères dans un champ de saisie de texte peut être effectuée à la fois lors de la saisie elle-même et lors d'un événement spécifique. Le script peut être utilisé dans les champs d'inscription, les formulaires de connexion, etc. Vous pouvez interdire des caractères spécifiques ou un groupe de caractères. Par exemple, vous pouvez interdire complètement la saisie de chiffres, interdire les espaces, les tabulations et interdire l'alphabet cyrillique ou latin.
200?"200px":""+(this.scrollHeight+5)+"px");">
["0-9",":"] - caractères dont la saisie dans ce champ sera interdite. Ajouté entre guillemets, séparés par des virgules.
Groupes de personnages
"0-9" ou "\d" - valeurs numériques
"a-ya" - lettres minuscules de l'alphabet cyrillique
"A-Z" - lettres majuscules de l'alphabet cyrillique
"A-ya" - toutes les lettres de l'alphabet cyrillique
"a-z" - lettres latines minuscules (la première lettre est latine)
"A-Z" - lettres majuscules de l'alphabet latin (Première lettre du latin)
"A-z" - toutes les lettres latines (la première lettre est latine)
"A-ya" - toutes les lettres (la première lettre est latine)
"\w" - toutes les lettres, chiffres et le symbole "_"
"\s" - caractères d'espace, de tabulation et de paragraphe
| Attention! La copie de ce matériel est interdite sans fournir un lien vers le site Web | |
| Source/Borat | |
L’essence des scripts, que nous examinerons plus loin, est de détecter à la volée les actions du visiteur et de lui interdire de saisir quoi que ce soit dans un certain champ, à l’exception des chiffres. Autrement dit, lorsque le curseur est focalisé sur le champ, lorsque vous essayez d'appuyer sur des lettres du clavier, rien ne se passera dans le champ, vous pouvez en même temps saisir des chiffres et certains symboles, tels que + - (), etc. , qui peut être nécessaire pour les champs numéro de téléphone ou autre numéro numérique.
Pour que ce script fonctionne, vous aurez d'abord besoin du champ de saisie du numéro. Par exemple, vous avez un champ dans un formulaire qui ressemble à ceci :
Le premier script utilise jQuery, vous devez donc ajouter une connexion à la bibliothèque jQuery dans l'en-tête de votre site avant le titre de fermeture ou dans le pied de page avant le corps de fermeture. Si vous l’avez fait ou si le système de gestion de contenu (moteur du site) le fait, vous n’avez pas besoin de le faire. Vous pouvez consulter le code source du site et s'il y a une ligne similaire quelque part, cette étape doit être ignorée. S'il n'y a pas de connexion, alors vous devez ajouter la ligne suivante :
C'est maintenant au tour du script lui-même. Nous l'ajoutons à un fichier séparé et l'incluons après la bibliothèque ou le mettons dans des balises :
/// CODE ICI...
Eh bien, le code lui-même :
JQuery(document).ready(function($)( $.fn.forceNumbericOnly = function() ( return this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode | | e.keyCode || 0; return (key == 8 || key == 9 || key == 46 ||(key >= 37 && key = 48 && key = 96 && key 57)) return false; ) ;
Personnellement, j'utilise le premier code, c'est plus pratique pour moi. Celui que vous choisissez dépend également de vous.
C'est tout, merci pour votre attention. 🙂
Tableau des codes de clés virtuelles pour javascript, promis ci-dessus.
|
Clé |
10ème code |
Clé |
10ème code |
| Retour arrière | 8 | ||
| Languette | 9 | Entrer | 13 |
| Changement | 16 | Ctrl | 17 |
| Alt | 18 | Pause | 19 |
| Verrouillage des majuscules | 20 | Échap | 27 |
| espace | 32 | Page précédente | 33 |
| Bas de page | 34 | Fin | 35 |
| Maison | 36 | Flèche gauche | 37 |
| flèche vers le haut | 38 | flèche droite | 39 |
| flèche vers le bas | 40 | Insérer | 45 |
| Supprimer | 46 | 0 | 48 |
| 1 | 49 | 2 | 50 |
| 3 | 51 | 4 | 52 |
| 5 | 53 | 6 | 54 |
| 7 | 55 | 8 | 56 |
| 9 | 57 | UN | 65 |
| B | 66 | C | 67 |
| 68 | E | 69 | |
| F | 70 | g | 71 |
| H | 72 | je | 73 |
| J. | 74 | K | 75 |
| L | 76 | M | 77 |
| N | 78 | Ô | 79 |
| P. | 80 | Q | 81 |
| R. | 82 | S | 83 |
| T | 84 | U | 85 |
| V | 86 | W | 87 |
| X | 88 | Oui | 89 |
| Z | 90 | touche Windows gauche | 91 |
| touche Windows droite | 92 | Clé des applications | 93 |
| Pavé numérique 0 | 96 | Pavé numérique 1 | 97 |
| Pavé numérique 2 | 98 | Pavé numérique 3 | 99 |
| Pavé numérique 4 | 100 | Pavé numérique 5 | 101 |
| Pavé numérique 6 | 102 | Pavé numérique 7 | 103 |
| Pavé numérique 8 | 104 | Pavé numérique 9 | 105 |
| Pavé numérique * | 106 | Pavé numérique + | 107 |
| Pavé numérique - | 109 | Pavé numérique. | 110 |
| Pavé numérique / | 111 | F1 | 112 |
| F2 | 113 | F3 | 114 |
| F4 | 115 | F5 | 116 |
| F6 | 117 | F7 | 118 |
| F8 | 119 | F9 | 120 |
| F10 | 121 | F11 | 122 |
| F12 | 123 | Verrouillage numérique | 144 |
| Verrouillage du défilement | 145 | Capture d'écran | 154 |
| Méta | 157 | ; | 186 |
| = | 187 | , | 188 |
| - | 189 | . | 190 |
| / | 191 | ~ | 192 |
| [ | 219 | \ | 220 |
| ] | 221 | " | 222 |
L'incrément, qui peut être un entier ou une fraction positive. La valeur valeur est un multiple de la valeur du pas, c'est-à-dire qu'elle est divisée par celle-ci sans reste. Exemple de valeurs autorisées pour valeur avec step="20" : …, -40, -20, 0, 20, 40, …. La valeur par défaut est 1. Autrement dit, une erreur s'affichera si vous entrez une fraction décimale. Afin de supprimer les restrictions, vous devez en attribuer des . valeur minimale possible requise pour soumettre le formulaire valeur maximale possible requise pour soumettre l'info-bulle du formulaire, stub de l'info-bulle lors de la saisie semi-automatique du survol de la souris. Vous pouvez le désactiver ou le rendre plus spécifique. liste des valeurs de champ de focus recommandées (c'est-à-dire la période entre le clic sur un élément et le clic en dehors de l'élément) obtenues lors du chargement du document
Le champ ne convient pas aux chaînes de texte composées de 16 chiffres ou plus, par exemple un numéro de carte en plastique, car les nombres longs à partir de 9007199254740991 peuvent être arrondis.
Quantité de marchandisesLes attributs minlength , maxlength et size ne fonctionnent pas.
J'ai reçu une tâche assez classique : filtrer les caractères saisis par l'utilisateur dans la saisie, c'est-à-dire l'utilisateur peut saisir un ensemble de chiffres et de lettres dans une ligne, par exemple « 5s68d.4r55e.6t5 », et au serveur I doit envoyer le montant correct en roubles pour économiser - "568,455" (roubles).
J'ai terminé la tâche assez rapidement en attachant un événement focusout à l'entrée, mais ma solution présentait un certain nombre de défauts importants : où dans cet exemple se termine le montant en roubles et où commence les kopecks ? Si l'utilisateur saisit plusieurs moins (les valeurs négatives sont également correctes dans ce cas), alors lequel des moins doit être considéré comme le début de la ligne ? Et ainsi de suite.
Par conséquent, une deuxième version du script avec des expressions régulières pour l'événement keyup est apparue :
$(e.currentTarget).val(($(e.currentTarget).val()).replace(/[^0123456789.-]/, ""))
Mais il s'est avéré que cette méthode présentait un inconvénient notable (je ne veux pas dire que l'utilisateur voit le caractère qu'il saisit puis ce caractère disparaît), à savoir si vous placez le curseur, par exemple, au milieu du numéro saisi en saisie, saisissez une lettre, puis le script découpera la lettre, mais déplacera les cours jusqu'à la fin de la ligne.
Pour cette raison, un ami senior m'a demandé d'écrire une fonction pour l'événement keypress. Après 30 minutes, la troisième version de la fonction était prête et elle ressemblait à ceci :
Function() ( return this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode || e.keyCode || 0; // autoriser le retour arrière, la tabulation, la suppression, la saisie , flèches, chiffres et numéros du clavier UNIQUEMENT // début, fin, point et retour décimal du pavé numérique (touche == 8 || touche == 9 || touche == 13 || touche == 46 || touche == 110 | | clé == 190 || (clé >= 35 && clé = 48 && clé = 96 && clé
