Password visualizzate solo con un flag

Printable View

05-06-2013, 12.46.10

Password visualizzate solo con un flag

Salve a Tutti
volevo chiedere una informazione...
io su una stessa pagina php (pagina di login al mio sito)
volevo realizzare un sistema con il quale se una casella di spunta è "spuntata" il campo di insermento password cambia da "tipe password" a "tipe text" se invece...questa non lo è il campo password rimane con tipe password;

in poche parole se la casella è spuntata la cella nella quale io scrivo la password diventa anziche con scrittuta "***" con scrittura "abc"
se io però velessi togliere il flag una volta riempito il campo devo poterlo fare senza che quest'ultimo si azzeri.....ma si devono semplicemente "nascondere" i caratteri inseriti...

come posso realizzare tutto ciò???

(va bene php, html, java)

Grazie in anticipo Fabio
05-06-2013, 13.21.27

potresti far riferimento a questa discussione, aggiustando il tiro e impostando il cambio non tra text e file ma tra text e password, avendo cura di passarti anche il valore che il campo contiene al momento del cambio.
05-06-2013, 15.21.08

il fatto è che io devo avere tutto in una pagina non posso avere una pagina che invia i dati ad un altra che mi stampa il valore a me serve che sia tutto in una tipo:
if "casella" = true il campo è ti tipo testo
else "casella" = false il campo è di tipo password
05-06-2013, 15.25.11

Citazione:

Originalmente inviato da fabiovergotti

il fatto è che io devo avere tutto in una pagina non posso avere una pagina che invia i dati ad un altra che mi stampa il valore a me serve che sia tutto in una tipo:
if "casella" = true il campo è ti tipo testo
else "casella" = false il campo è di tipo password

Non vedo dove sta il problema.
Ho detto passarti in riferimento alle funzioni usate (in quell'esempio).
Puoi fare tutto in una sola pagina, chi ha detto il contario.
05-06-2013, 15.31.41

scusa ma mi sono avventurato da poco nel mondo del php :)
05-06-2013, 15.33.51

Citazione:

Originalmente inviato da fabiovergotti

scusa ma mi sono avventurato da poco nel mondo del php :)

Infatti ste cose si fanno in JS (lato client) non PHP (lato server). Una volta inviata la pagina al browser il PHP ha finito il suo compito, e la modifica del documento è di competenza di linguaggi client-side (sempre che l'utente non li disabiliti).
05-06-2013, 15.41.45

ho provato a fare come mi hai detto tu...
(parti dal presupposto che del JS di capisco poco niente)

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <script type="text/javascript"> //<![CDATA[ function cambia(){ document.forms.form.campo.type="text"; } function cambia2(){ document.forms.form.campo.type="password"; } //]]> </script> </head> <body>   <form name='form'> <input type='password' name='campo'> </form> <a href='' onclick='cambia(); return false;'>visualizza password</a><br/> <a href="" onclick='cambia2(); return false;'>rimuovi visualizzazione password</a> </body> </html>

ma sono riuscito ad ottenere il risultato ottenuto facendo 2 link....come faccio a trasformate tutto ciò nel true o false della casella di spunta?
05-06-2013, 15.47.03

io metterei un checkbox e al click farei cambiare il tipo.
Per cui se parti da una situazione in cui il campo è di tipo password e il checkbox deselezionato, al click il campo diventa di tipo text e il checkbox selezionato. Al successivo click, la situazione ritorna come l'inizio.
05-06-2013, 15.53.24

appunto...il mio problema è come realizzarlo xD
05-06-2013, 16.01.33

grazie mille comunque :)
05-06-2013, 16.08.54

Citazione:

Originalmente inviato da fabiovergotti

appunto...il mio problema è come realizzarlo xD

Nell'esempio che ti linkato nel primo intervento hai la struttura bella e pronta.
In quell'esempio un click su un link cambia il campo da text a file, un successivo click lo riporta a text.
05-06-2013, 16.21.16

OK DAI CI HO CAPITO QUALCOSA ;)
grazie 1000
05-06-2013, 16.25.53

Citazione:

Originalmente inviato da fabiovergotti

OK DAI CI HO CAPITO QUALCOSA ;)
grazie 1000

Provaci. Se proprio non riesci, poi, posta quello che hai fatto.
Solo sono contrario al codice bello e pronto. ;)
05-06-2013, 16.34.30

l'ho fatto con la doppia scritta evidenziando lo sfondo...è anche più chiaro....dimmi se ti piace....:

http://fabiovergotti.altervista.org/...per_login.html

premi su "effettua il login"
05-06-2013, 16.39.52

già che ci sono ne approfitto per chiederti un'altra cosa...

se hai notato nella pagina ci sono degli occhietti che seguono il puntatore del mouse...

è possibile tramite un JS far apparire da questi un fumetto appena l'utente finisce di scrivere la password e preme al di fuori del campo apposito?
05-06-2013, 16.59.12

Subito una precisazione.
Se non vuoi far puntare un link da nessuna parte, non usare href='' ma href='#'.

Poi il tuo esempio su IE non funziona (a dire il vero non funziona nulla del tuo sito su IE, il click sui tasti non produce effetto), IE non ti permette di agire sulla proprietà type.
Se vedi il codice che JS dell'esempio proposto veniva prima di tutto verificato il browser usato e in base a questo cambia il modus operandi.

Su IE l'approccio era quello di creare un nuovo elemento input di tipo voluto, posizionandolo dopo l'elemento indicato, che poi sostituirà.

Personalmente a me non piace il doppio tasto.

Rimanendo nell'ambito del tuo codice, per eliminare almeno un tasto inizierei a sostituire u due pulsanti con uno solo (Mostra/Nascondo Password) che richiami al click la funzione cambia().

La funzione prima verifica di che tipo è il campo password (text o password) e agirà di conseguenza.

Qualcosa del tipo

Codice:

function cambia(){ if(document.forms.form.campo.type == "password") { document.forms.form.campo.type = "text"; }else{ document.forms.form.campo.type = "password"; } }

Per il cursore (a parte che personalmente infastidisce) devi catturare l'evento blur sul campo (quando il campo attivo non è più il campo password) e modificare il cursore come meglio credi (o qualunque altro controllo).
05-06-2013, 17.20.51

Citazione:

Originalmente inviato da simpleticket

Subito una precisazione.
Se non vuoi far puntare un link da nessuna parte, non usare href='' ma href='#'.

Poi il tuo esempio su IE non funziona (a dire il vero non funziona nulla del tuo sito su IE, il click sui tasti non produce effetto), IE non ti permette di agire sulla proprietà type.
Se vedi il codice che JS dell'esempio proposto veniva prima di tutto verificato il browser usato e in base a questo cambia il modus operandi.

Su IE l'approccio era quello di creare un nuovo elemento input di tipo voluto, posizionandolo dopo l'elemento indicato, che poi sostituirà.

Personalmente a me non piace il doppio tasto.

Rimanendo nell'ambito del tuo codice, per eliminare almeno un tasto inizierei a sostituire u due pulsanti con uno solo (Mostra/Nascondo Password) che richiami al click la funzione cambia().

La funzione prima verifica di che tipo è il campo password (text o password) e agirà di conseguenza.

Qualcosa del tipo

Codice:

function cambia(){ if(document.forms.form.campo.type == "password") { document.forms.form.campo.type = "text"; }else{ document.forms.form.campo.type = "password"; } }

Per il cursore (a parte che personalmente infastidisce) devi catturare l'evento blur sul campo (quando il campo attivo non è più il campo password) e modificare il cursore come meglio credi (o qualunque altro controllo).

ok bell'idea :) applicata :)

e per il fumetto sai se si può fare?
05-06-2013, 18.07.50

Citazione:

Originalmente inviato da fabiovergotti

e per il fumetto sai se si può fare?

Ti ho già detto che devi catturare l'evento blur del campo.
quando si verifica (quando cioè il campo non ha più il focus) cambi l'icona degli occhi con una con la nuvoletta o ciò che vuoi.

Citazione:

Originalmente inviato da fabiovergotti

ok bell'idea :) applicata :)

Ma hai letto che su IE hai un bel po' di problemi?
Considera che IE ha ancora una buona fetta di utilizzatori ...
05-06-2013, 18.18.41

Citazione:

Originalmente inviato da simpleticket

Ti ho già detto che devi catturare l'evento blur del campo.
quando si verifica (quando cioè il campo non ha più il focus) cambi l'icona degli occhi con una con la nuvoletta o ciò che vuoi.

Ma hai letto che su IE hai un bel po' di problemi?
Considera che IE ha ancora una buona fetta di utilizzatori ...

lo sò ho letto ma per adesso essendo alle mie prime armi mi accontento quando comincerò a fare cose un po' più serie allora farò tutto per bene....questo è un "sito si esercitazione" ...

per il discorso del fumetto non intendevo che si sostituisse agli occhi ma che venisse fuori da un'iride (come se fossero gli occhi che parlassero)
06-06-2013, 10.15.36

Citazione:

Originalmente inviato da fabiovergotti

...per il discorso del fumetto non intendevo che si sostituisse agli occhi ma che venisse fuori da un'iride (come se fossero gli occhi che parlassero)

Siccome non si può far tutto come lo si vorrebbe, tieni a mente l'effetto che vuoi ottenere.
Ti crei l'animazione voluta (gli occhi con il fumetto che ne vien fuori, o quello che vuoi), e al momento opportuno sostituisci l'immagine attuale (solo occhi) con l'animazione cercata (occhi + fumetto). Quello che ne risulta visivamente dovrebbe assomigliare parecchio a quello che pensi.