Eingabe mit JQuery einschränken

Wenn mich eines online wahnsinnig macht, dann ist es, wenn Eingabeformulare mir erlauben, falsche Daten einzugeben, nur um auf den Fehler hinzuweisen, nachdem ich es versucht habe. Es scheint, als ob die Hälfte der Formulare, die ich einreiche, nachgefüllt und erneut eingereicht werden muss, weil ich kein Großbuchstabe in mein Passwort eingegeben habe, oder ich habe es getan, oder das Passwort kann nur numerisch sein oder eine andere Anforderung, die niemand erwähnen wollte.

So wie das Gehirn funktioniert, suchen wir nach Lösungen basierend auf den Werkzeugen, die vor uns liegen. Sie geben am GAA keine Großbuchstaben ein, oder? Nein, weil das ATM-Keypad nur Nummern hat. Sie könnten versehentlich die falsche Nummer wählen, aber Sie haben nie versucht, Ihre E-Mail-Adresse oder den Mädchennamen Ihrer Mutter einzugeben.

Darin liegt das Problem, dass die von Ihnen verwendete Tastatur das Eingeben von Daten online erschwert. Es hat wahrscheinlich zwischen 75 und 100 Tasten und noch mehr Zeichen sind leicht zugänglich, indem Sie Multi-Tasten-Kombinationen halten. Wenn man sich bei Facebook anmeldet, ist es eher so, als würde man in einem Ferrari nach Milch suchen.

Natürlich muss Ihre Tastatur mehr Eingabemöglichkeiten haben, als ein bestimmtes Formularfeld erfordert, da es ein Werkzeug für mehrere Benutzer ist; Sie können praktisch keine andere Tastatur für jeden möglichen Eingangstyp verwenden.

Dies führt zu einem ernsthaften Usability-Problem: Benutzer werden ständig aufgefordert, ihre Informationen an ein Formular anzupassen. Das ist ein guter Weg, um Frustration zu erhöhen und Geschäft zu verlieren.

Touchscreen-Geräte haben in diesem Bereich große Fortschritte gemacht, indem sie die Bildschirmtastatur so modifiziert haben, dass sie die möglichen Eingabearten an die erforderlichen Daten anpassen. Geben Sie zum Beispiel eine E-Mail-Adresse auf einem iPhone ein, und Sie können aus Versehen kein Leerzeichen eingeben, da die Leertaste nicht zur Verfügung steht.

Digitales Tastaturbild über Shutterstock

Bis wir alle an Touchscreens arbeiten, brauchen wir eine temporäre Lösung, und das ist eigentlich ganz einfach: Mit jQuery können wir eine Intelligenzschicht zwischen Tastatur und Eingabefeld einfügen und die Daten nur akzeptieren, wenn sie innerhalb der erwarteten Grenzen liegt ignoriert alles außerhalb dieser Grenzen und ist zuversichtlich, dass es ein Fehler ist.

Zuerst müssen wir ein Eingabefeld in HTML einrichten, das wir einschränken möchten, zum Beispiel eine Telefonnummer:

Phone:

Dann müssen wir im Kopf des Dokuments jQuery importieren:

Und fügen Sie unmittelbar danach das folgende Skript hinzu:

Dieses Skript wird ausgeführt, sobald das Dokument fertig ist, und fügt dem Eingabefeld .phoneInput eine Tastenmethode hinzu . Dann erkennen wir anhand der Eigenschaft charCode , welcher Schlüssel gedrückt wurde - die Zahl 0 erhält den Code 48, 1 ist 49 usw. - jeder Schlüssel, der außerhalb unseres Bereichs liegt, sollte false zurückgeben. Wenn die Methode false zurückgibt, ignoriert der Browser einfach den Tastendruck.

Dies bedeutet, dass, wenn der Benutzer eine Taste berührt, die nicht 0-9 ist, die Eingabe ignoriert wird, wodurch die Eingabe effektiv auf Zahlen beschränkt wird.

Wir können dieselbe Technik auf fast jedes Feld anwenden, indem wir komplexe Regeln unter Verwendung von logischem UND und logischem ODER aufbauen. Wenn wir beispielsweise die Eingabe für einen Nachnamen einschränken möchten, müssen wir die Eingabe auf Kleinbuchstaben (97-122), Großbuchstaben (65 - 90) und gelegentlich auf Bindestrich (45) beschränken:

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

Sie können Probiere hier eine Demo aus .

Dieser Code ist eine progressive Erweiterung. Es wird die Servervalidierung etwas entlasten, aber das bedeutet nicht, dass Sie die gesammelten Informationen auch nicht validieren sollten.

Vorbeugen ist, wie es heißt, besser als heilen; Wenn Sie diesen Tipp verwenden, sehen Sie eine Reduzierung der Anzahl der Benutzer, die Ihre Formulare starten, jedoch nicht ausfüllen, insbesondere wenn komplexe Datenanforderungen vorliegen.

Führen Benutzer regelmäßig Fehler auf Ihren Formularen? Wie gehst du mit den Fehlern um? Lassen Sie es uns in den Kommentaren wissen.

Empfohlenes Bild / Vorschaubild: Tastaturbild über Shutterstock