Für diejenigen von uns, die häufig unterwegs sind, greifen wir häufig auf öffentliche E-Mails und andere vertrauliche Webkonten zu. In solchen Fällen sind wir Keyloggern und anderer bösartiger Software, die unsere Tastatureingaben aufzeichnet und unsere Passwörter aufzeichnet, vollständig ausgeliefert.
Sehr wenige Websites bieten ihren Benutzern jedoch die Möglichkeit, ihre Passwörter über eine virtuelle Tastatur (mindestens) einzugeben. Ja, einige Banken tun dies, aber wenn man bedenkt, wie viele persönliche Daten wir heute in verschiedenen Webanwendungen speichern, ist die Sicherheit dieser Konten für uns nicht weniger wichtig. In diesem Tutorial wird erklärt, wie Sie eine einfache virtuelle Tastatur mit Hilfe von jQuery (gut, okay, viel!) Implementieren können.
Bevor ich anfange, lassen Sie mich Ihnen zeigen, wie es am Ende aussehen wird.
Grundlegendes HTML- und CSS-Setup
Ok, lass uns anfangen. Wir beginnen mit einem einfachen, alten Anmeldeformular mit Benutzernamen und Kennwort und einer Anmeldeschaltfläche. Wir fügen einen Link hinzu, der beim Klicken die virtuelle Tastatur ein- / ausblenden kann.
Hinweis: Zu Demonstrationszwecken habe ich eigentlich ein normales Textfeld anstelle eines Textfelds mit Kennworttyp verwendet!
Als nächstes ist es Zeit, das XHTML für die Tastatur einzufügen. Ich wollte nur einen sehr einfachen Ansatz wählen und schloss daher aus, die Schlüssel dynamisch zu generieren. Ich habe nur die vier Hauptzeilen der Standardtastatur (jeweils eingeschlossen in einem DIV), zusammen mit ihren Schichtäquivalenten. Das bedeutet also insgesamt 8 Zeilen, von denen zu jeder Zeit (abhängig davon, ob die Umschalttaste gedrückt ist oder nicht) vier der Zeilen sichtbar und die anderen vier ausgeblendet sind.
Ich habe darauf geachtet, Zeichen darzustellen, die in HTML eine besondere Bedeutung haben, wie? <? Entitäten verwenden.
Das CSS
Ich habe das CSS-Styling sehr minimal gehalten. Wenn Sie möchten, dass Ihre Tastatur wie ein Drache aussieht, können Sie diesen Jazz vollführen. Wir setzen die Anzeigeeigenschaft von div, die die Tastatur einschließt, auf "keine". anfangs, da wir nicht möchten, dass es angezeigt wird, bis der Benutzer es durch Klicken auf die Tastatur aktiviert. Verknüpfung. Darüber hinaus verstecken wir auch die? Schicht? die Tasten, die nur aktiviert werden, wenn die Umschalttaste gedrückt ist. Ich habe diese Zeilen mit einer Div-ID benannt, die auf "_shift" endet. Wir werden sie wieder anzeigen, wenn der Benutzer die Umschalttaste drückt (wir werden später sehen).
Der Rest des CSS beinhaltet eine grundlegende Formatierung, damit die Tasten wie auf einer Standard-QWERTY-Tastatur aussehen.
jQuery
Kommen wir nun zum wichtigsten Teil - dem JavaScript, das das Verhalten der Tastatur steuert. Wir werden zwei jQuery-Erweiterungen verwenden - eine, um die Tastatur ziehen zu können, und die andere, um die Auswahl und Bearbeitung des Passwortfeldes zu erleichtern. Ich habe einige Ergänzungen zum ursprünglichen fieldSelection JQuery-Plugin von Alex Brem hinzugefügt, um unseren zusätzlichen Anforderungen gerecht zu werden. vkeyboard.js enthält unseren benutzerdefinierten Code.
In vkeyboard.js wird der gesamte Code in die jQuery-Ready-Funktion eingefügt, um sicherzustellen, dass der Code erst ausgeführt wird, wenn das Dokument vollständig geladen ist.
Lassen Sie mich einfach durch die zugrunde liegende Logik hinter dem Code gehen. Zuerst fügen wir einen "Onclick" hinzu. Event-Handler, der bewirkt, dass die Tastatur umschaltet (d. h. angezeigt wird, wenn sie ausgeblendet ist, ausgeblendet, wenn bereits angezeigt), wenn der Benutzer auf die? Tastatur? klickt. Verknüpfung.
Als Nächstes machen wir die Tastatur ziehbar, sodass der Benutzer sie ziehen und an einer beliebigen Stelle auf dem Bildschirm behalten kann, so dass der darunterliegende Text nicht blockiert wird. Dazu rufen wir das draggable () auf, mit freundlicher Genehmigung des jQuery UI + Draggable Plugins.
Als Nächstes müssen wir eine Funktion definieren, die zwischen den Standardzeilen auf der Tastatur und den Zeilen umschaltet, die aktiviert werden, wenn die Umschalttaste gedrückt wird. Taste wird gedrückt.
Zuletzt definieren wir eine Funktion, die aufgerufen wird, wenn eine der Tasten auf der Tastatur gedrückt wird.
Diese Funktion prüft, ob die gedrückte Taste die Rücktaste ist. Wenn dies der Fall ist, ruft es die Funktion replaceSelection aus dem fieldSelection-Plugin mit einer leeren Zeichenfolge als Parameter auf, um anzuzeigen, dass eine Rückschrittoperation (Ersetzen des vorhergehenden Zeichens an der aktuellen Cursorposition durch eine leere Zeichenfolge - dh Löschen des vorhergehenden Zeichens) erforderlich ist durchgeführt.
Wenn die? Shift? Taste gedrückt wurde, dann setzt die Funktion die "shifton" Variable true, um anzuzeigen, dass die Umschalttaste gedrückt wurde, und ruft onShift (1) auf.Wenn jedoch die Umschalttaste bereits gedrückt wurde, deaktiviert die Funktion die Umschaltzeilen durch Aufruf von Shift (0).
Wenn eine andere Taste gedrückt wurde, fügen wir das Zeichen einfach zwischen die aktuelle Cursorposition ein. Die replaceSelection () behandelt den Fall, wenn vom Benutzer bereits einige Zeichen ausgewählt wurden. In diesem Fall werden die ausgewählten Zeichen durch das Zeichen ersetzt, das durch die gedrückte Taste dargestellt wird.
Und? wir sind fertig! Schauen Sie sich die Demo an und laden Sie den vollständigen Quellcode hier herunter.
Wie Sie sehen, wird die meiste harte Arbeit von den jQuery-Plugins erledigt. Wenn Sie mehr über die Herausforderungen bei der Feldauswahl und -ersetzung mit Javascript erfahren möchten, sollten Sie diesen Artikel über Quirksmode lesen.