För de av oss som reser ofta slutar vi ofta med våra e-postmeddelanden och andra konfidentiella webbkonton på offentliga datorer. Under sådana omständigheter är vi helt nöjda med keyloggers och annan skadlig programvara som spårar våra tangenttryckningar och registrerar våra lösenord.
Ändå ger väldigt få webbplatser sina användare möjligheten att använda ett virtuellt tangentbord för att skriva in sina lösenord (i det lägsta läget). Ja, några banker gör det, men med tanke på hur mycket personlig information vi lagrar i olika webbapplikationer dessa dagar, är säkerheten för dessa konton inte av mindre betydelse för oss. Denna handledning kommer att förklara hur vi kan implementera ett enkelt virtuellt tangentbord med några (bra okej, massor av!) Hjälp från jQuery.
Innan jag börjar, låt mig visa dig hur det hela kommer att se ut i slutet.
Grundläggande HTML och CSS Setup
Okej, låt oss börja. Vi börjar med en vanlig, gammal inloggningsblankett med användarnamn och lösenordsfält och en inloggningsknapp. Vi lägger till en länk som visar / gömmer det virtuella tangentbordet när det klickas.
Obs! I syfte att demonstrera har jag faktiskt använt ett normalt textfält istället för ett textfält för lösenordstyp!
Därefter är det dags att sätta in XHTML för tangentbordet på plats. Jag ville bara ta ett mycket enkelt tillvägagångssätt och sålunda utesluta att generera nycklarna dynamiskt. Jag har bara de fyra huvudraderna på standardtangentbordet (varje bifogat i en DIV), tillsammans med deras växlingsekvivalenter. Så det betyder totalt 8 rader, varav när som helst (beroende på om skiftnyckeln trycks eller inte), fyra av raderna skulle vara synliga och de andra fyra gömda.
Jag har tagit hand om att representera tecken som har särskild betydelse i HTML, som? <? använda enheter.
CSS
Jag har hållit CSS-styling väldigt minimal. Självklart, om du vill att ditt tangentbord ska se ut som en drake, kan du fortsätta och all den jazzen! Vi ställer in visningsegenskapen för div som omsluter tangentbordet till att vara? Ingen? Först, eftersom vi inte vill att den ska dyka upp tills användaren aktiverar den genom att klicka på tangentbordet? länk. Dessutom döljer vi också? Shift? nycklar, dvs knapparna som aktiveras endast när växlingsknappen är nere. Jag har namngett dessa rader med en div-id som slutar? _Shift ?. Vi kommer att komma tillbaka till dem när användaren trycker på växlingsnyckeln (vi ses senare).
Resten av CSS innefattar grundläggande formatering för att tangenterna ska se ut som de är på ett vanligt QWERTY-tangentbord.
jQuery
Låt oss nu komma till den viktigaste delen - JavaScript som styr tangentbordets beteende. Vi kommer att använda två jQuery-tillägg - en för att göra tangentbordet draggbart, och det andra för att hjälpa till vid val och manipulering av lösenordsfältet. Jag har gjort några tillägg till det ursprungliga fältet Selektion JQuery-plugin av Alex Brem för att passa våra ytterligare behov. vkeyboard.js innehåller vår anpassade kod.
I vkeyboard.js lägger vi all kod i jQuerys färdiga funktion för att säkerställa att koden körs först efter att dokumentet är fullt laddat.
Låt mig bara gå igenom den underliggande logiken bakom koden. Vi lägger först till en? Onclick? händelsehanterare som gör att tangentbordet växlar (dvs visas om det är dolt, dölj om det redan visas) när användaren klickar på tangentbordet? länk.
Därefter gör vi tangentbordet draggbart, så att användaren kan dra den och hålla sig någonstans på skärmen så att den inte hindrar texten nedan. Vi gör det genom att ringa det draggbara (), med tillstånd av jQuery UI + draggable plugin.
Vi måste nu definiera en funktion som växlar mellan standardraderna på tangentbordet och raderna som aktiveras när? Shift? tangenten trycks in.
Slutligen definierar vi en funktion som kallas när någon av tangenterna på tangentbordet pressas.
Denna funktion kontrollerar om tangenten trycks in är Backspace. Om det är så kallar det funktionen replaceSelection från fieldSelection plugin med en tom sträng som parameter för att indikera att en backspace-operation (ersätter föregående tecken till aktuell markörposition med en tom sträng - dvs radering av föregående tecken) måste vara genomförde.
Om? Shift? nyckeln hade tryckts, så ställer funktionen "Shifton? variabel för att vara sant för att indikera att skiftnyckeln har tryckts och kallar Skift (1).Men om skiftnyckeln redan har tryckts, avaktiverar funktionen skiftraderna genom att ringa onShift (0).
Om någon annan nyckel hade tryckts, sätter vi enkelt in tecknet mellan den aktuella markörpositionen. ReplaceSelection () hanterar fallet när vissa tecken redan har valts av användaren. I så fall ersätts de valda tecknen med tecknet som representeras av tangenten.
Och? vi är klara! Kolla in demoen och ladda ner full källkod här.
Som du kan se hanteras det mesta av det faktiska hårda arbetet av jQuery-plugins. Om du är intresserad av att läsa mer om utmaningarna med fältval och utbyte med hjälp av Javascript, bör du kolla in den här artikeln på Quirksmode.