Der Kern der Skripte, die wir weiter betrachten werden, besteht darin, die Aktionen des Besuchers im Handumdrehen zu erfassen und ihm zu verbieten, in ein bestimmtes Feld etwas außer Zahlen einzugeben. Das heißt, wenn der Cursor auf das Feld gerichtet ist und Sie versuchen, Buchstaben auf der Tastatur zu drücken, passiert nichts im Feld. Gleichzeitig können Sie Zahlen und einige Symbole eingeben, z. B. + - () usw , die möglicherweise für die Felder Telefonnummer oder andere digitale Nummer benötigt wird.
Damit dieses Skript funktioniert, benötigen Sie zunächst das Feld zur Eingabe der Nummer. Sie haben beispielsweise ein Feld in einem Formular, das etwa so aussieht:
Das erste Skript verwendet jQuery, daher müssen Sie im Header Ihrer Site vor dem schließenden Header oder in der Fußzeile vor dem schließenden Text eine Verbindung zur jQuery-Bibliothek hinzufügen. Wenn Sie dies getan haben oder das Content-Management-System (Site-Engine) dies tut, müssen Sie dies nicht tun. Du kannst schauen Quellcode Wenn es irgendwo eine ähnliche Zeile gibt, muss dieser Schritt übersprungen werden. Wenn keine Verbindung besteht, müssen Sie die folgende Zeile hinzufügen:
Jetzt ist das Drehbuch selbst an der Reihe. Wir fügen es hinzu separate Datei und verbinde es nach der Bibliothek oder schließe es in Tags ein:
/// HIER CODE...
Nun, der eigentliche Code selbst:
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 == 37 && key = 96 && key 57));
Persönlich verwende ich den ersten Code, das ist für mich bequemer. Für welches Sie sich entscheiden, liegt ebenfalls bei Ihnen.
Das ist alles, vielen Dank für Ihre Aufmerksamkeit. 🙂
Tabelle der oben versprochenen virtuellen Schlüsselcodes für Javascript.
Schlüssel |
10. Code |
Schlüssel |
10. Code |
Rücktaste | 8 | ||
Tab | 9 | Eingeben | 13 |
Schicht | 16 | Strg | 17 |
Alt | 18 | Pause | 19 |
Feststelltaste | 20 | Esc | 27 |
Raum | 32 | PageUp | 33 |
PageDown | 34 | Ende | 35 |
Heim | 36 | Pfeil nach links | 37 |
Pfeil nach oben | 38 | rechter Pfeil | 39 |
Pfeil nach unten | 40 | Einfügen | 45 |
Löschen | 46 | 0 | 48 |
1 | 49 | 2 | 50 |
3 | 51 | 4 | 52 |
5 | 53 | 6 | 54 |
7 | 55 | 8 | 56 |
9 | 57 | A | 65 |
B | 66 | C | 67 |
68 | E | 69 | |
F | 70 | G | 71 |
H | 72 | ICH | 73 |
J | 74 | K | 75 |
L | 76 | M | 77 |
N | 78 | O | 79 |
P | 80 | Q | 81 |
R | 82 | S | 83 |
T | 84 | U | 85 |
V | 86 | W | 87 |
X | 88 | Y | 89 |
Z | 90 | linke Windows-Taste | 91 |
rechte Windows-Taste | 92 | Anwendungsschlüssel | 93 |
Numpad 0 | 96 | Numpad 1 | 97 |
Numpad 2 | 98 | Numpad 3 | 99 |
Numpad 4 | 100 | Numpad 5 | 101 |
Numpad 6 | 102 | Numpad 7 | 103 |
Numpad 8 | 104 | Numpad 9 | 105 |
NumPad * | 106 | Numpad + | 107 |
NumPad - | 109 | NumPad. | 110 |
NumPad / | 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 | NumLock | 144 |
ScrollLock | 145 | PrintScreen | 154 |
Meta | 157 | ; | 186 |
= | 187 | , | 188 |
- | 189 | . | 190 |
/ | 191 | ~ | 192 |
[ | 219 | \ | 220 |
] | 221 | " | 222 |
Ich habe eine ziemlich normale Aufgabe erhalten: die vom Benutzer in die Eingabe eingegebenen Zeichen zu filtern, d. h. der Benutzer kann eine Reihe von Zahlen und Buchstaben in eine Zeile eingeben, zum Beispiel „5s68d.4r55e.6t5“, und an den Server senden muss den korrekten Betrag in Rubel zum Sparen überweisen – „568,455“ (Rubel).
Ich habe die Aufgabe schnell genug erledigt, indem ich ein Focusout-Ereignis an die Eingabe angehängt habe, aber meine Lösung hatte eine Reihe wichtiger Nachteile: wo in in diesem Beispiel Endet der Betrag in Rubel und beginnt der Betrag in Kopeken? Wenn der Benutzer mehrere Minuszeichen eingibt (in diesem Fall sind auch negative Werte korrekt), welches der Minuszeichen gilt dann als Zeilenanfang? Und so weiter.
Daher erschien eine zweite Version des Drehbuchs mit reguläre Ausdrücke zum Keyup-Event:
$(e.currentTarget).val(($(e.currentTarget).val()).replace(/[^0123456789.-]/, ""))
Aber wie sich herausstellte, hatte diese Methode einen spürbaren Nachteil (ich meine nicht, dass der Benutzer das Zeichen sieht, das er eingibt, und dieses Zeichen dann verschwindet), nämlich wenn man den Cursor beispielsweise in der Mitte platziert Wenn Sie die eingegebene Zahl in der Eingabe eingeben, geben Sie einen Buchstaben ein. Das Skript schneidet dann den Buchstaben aus, verschiebt die Kurse jedoch an das Ende der Zeile.
Aus diesem Grund beauftragte mich ein älterer Freund, eine Funktion für das Tastendruckereignis zu schreiben. Nach 30 Minuten war die dritte Version der Funktion fertig und sie sah in etwa so aus:
Function() ( return this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode || e.keyCode || 0; // Rücktaste, Tab, Löschen, Eingabe zulassen NUR , Pfeile, Ziffern und Tastaturnummern // Posaune, Ende, Punkt und Numpad-Dezimalrückgabe (Taste == 8 || Taste == 9 || Taste == 13 || Taste == 46 || Taste == 110 | |. Schlüssel == 190 ||. (Schlüssel >= 35 && Schlüssel = 48 && Schlüssel = 96 && Schlüssel