Creazione di una tastiera jQuery virtuale

Per quelli di noi che viaggiano spesso, spesso finiamo per accedere alle nostre e-mail e ad altri account Web riservati su computer pubblici. In tali circostanze, siamo completamente in balia di keylogger e altri software dannosi che tracciano i nostri tasti e registrano le nostre password.

Tuttavia, pochissimi siti Web offrono ai propri utenti la possibilità di utilizzare una tastiera virtuale per inserire (come minimo) le loro password. Sì, alcune banche lo fanno, ma considerando la quantità di informazioni personali che immagazziniamo in varie applicazioni web in questi giorni, la sicurezza di questi account non ha per noi meno significato. Questo tutorial spiegherà come possiamo implementare una semplice tastiera virtuale con un po '(beh, ok, un sacco!) Aiuto da jQuery.

Prima di iniziare, lascia che ti mostri come apparirà alla fine.

Installazione HTML e CSS di base

Ok, iniziamo. Iniziamo con un semplice modulo di login con i campi username e password e un pulsante di accesso. Aggiungiamo un link che mostrerà / nasconderà la tastiera virtuale quando cliccato.

Nota: ai fini della dimostrazione, ho effettivamente utilizzato un campo di testo normale anziché un campo di testo di tipo password!

Successivamente, è il momento di inserire l'XHTML per la tastiera in posizione. Volevo solo adottare un approccio molto semplice e quindi escludere la generazione dinamica delle chiavi. Ho solo le quattro righe principali della tastiera standard (ciascuna racchiusa in un DIV), insieme ai loro equivalenti di turno. Ciò significa che un totale di 8 righe, di cui in qualsiasi momento (a seconda che venga premuto o meno il tasto Maiusc), quattro delle righe saranno visibili e le altre quattro nascoste.

Mi sono preoccupato di rappresentare personaggi che hanno un significato speciale in HTML, come? <? usando le entità.

Il CSS

Ho mantenuto lo stile CSS molto minimale. Certo, se vuoi che la tua tastiera assomigli ad un drago, puoi andare avanti e tutto quel jazz! Impostiamo la proprietà display di div che racchiude la tastiera per essere? None? inizialmente, poiché non vogliamo che venga visualizzato finché l'utente non lo attiva facendo clic sulla? Tastiera? collegamento. Inoltre, nascondiamo anche il? Turno? i tasti, cioè i tasti che si attivano solo quando il pulsante shift è abbassato. Ho chiamato queste righe con un ID div che termina? _Shift ?. Li riporteremo in vista quando l'utente preme il tasto Maiusc (vedremo più avanti).

Il resto del CSS implica la formattazione di base per far apparire i tasti come se fossero su una tastiera QWERTY standard.

jQuery

Passiamo ora alla parte più importante, il JavaScript che controlla il comportamento della tastiera. Utilizzeremo due estensioni jQuery: una per rendere trascinabile la tastiera e l'altra per facilitare la selezione e la manipolazione del campo della password. Ho apportato alcune aggiunte al plug-in JQuery fieldSelection originale di Alex Brem per soddisfare le nostre esigenze aggiuntive. vkeyboard.js contiene il nostro codice personalizzato.

In vkeyboard.js, inseriamo tutto il nostro codice all'interno della funzione ready di jQuery per garantire che il codice venga eseguito solo dopo che il documento è stato caricato completamente.

Lascia che ti guidi attraverso la logica sottostante al codice. Per prima cosa aggiungiamo un? Onclick? gestore di eventi che fa sì che la tastiera si sposti (ad esempio, mostrare se nascosta, nascondere se già visualizzata) quando l'utente fa clic sulla? Tastiera? collegamento.

Successivamente, rendiamo la tastiera trascinabile, in modo che l'utente possa trascinarla e mantenerla ovunque sullo schermo in modo da non ostruire il testo sottostante. Facciamo ciò chiamando draggable (), per gentile concessione del plugin trascinabile dell'interfaccia utente jQuery.

Dobbiamo definire successivamente una funzione che commuta tra le righe predefinite sulla tastiera e le righe che vengono attivate quando? Shift? il tasto è premuto.

Infine, definiamo una funzione che viene chiamata ogni volta che viene premuto uno dei tasti della tastiera.

Questa funzione controlla se il tasto premuto è Backspace. In questo caso, richiama la funzione replaceSelection dal plug-in fieldSelection con una stringa vuota come parametro, per indicare che un'operazione di backspace (che sostituisce il carattere precedente nella posizione corrente del cursore con una stringa vuota, ovvero che elimina il carattere precedente) deve essere eseguita.

Se il? Shift? il tasto era stato premuto, quindi la funzione imposta lo shifton? variabile per essere vero per indicare che il tasto shift è stato premuto e chiama onShift (1).Tuttavia, se il tasto Maiusc è già stato premuto, la funzione disattiva le righe del turno chiamando onShift (0).

Se è stato premuto un altro tasto, è sufficiente inserire il carattere tra la posizione corrente del cursore. ReplaceSelection () gestisce il caso quando alcuni caratteri sono già stati selezionati dall'utente. In tal caso, i caratteri selezionati verranno sostituiti dal carattere rappresentato dal tasto premuto.

E? abbiamo chiuso! Guarda la demo e scarica qui il codice sorgente completo.

Come puoi vedere, gran parte del duro lavoro è gestito dai plugin jQuery. Se sei interessato a leggere di più sulle sfide legate alla selezione e alla sostituzione dei campi usando Javascript, dovresti dare un'occhiata a questo articolo su Quirksmode.