[html-javascript] login simil-facebook

[Fede 88]

Qualcuno mi può dire come faccio a gestire le form come quelle usate per il login in facebook.

Dentro le due form ci deve essere scritto, username e password e quando si clicca su una di esse scopare la scritta.

Il problema principale ce l'ho con la password, infatti scrivendo dentro la form non visualizza la scritta ma i pallini. Come posso fare..?

Grazie

[Fede 88]

Qualcuno sa come posso fare?

[_Claudio]

Qualcuno sa come posso fare?

Devi associare un evento OnClick e un evento OnLostFocus (o qualcosa del genere) all'oggetto DOM input, la traccia da seguire è semplice:


funzione input.OnClick() {
input.text = "";
}



funzione input.OnLostFocus() {
if(input.text == "") input.text = "inserisci password";
}

[Fede 88]

Non riesco a far funzionare il codice che mi hai dato, la mia form è questa:


<input name="user" type="text" size=20 style="width: 149px" value="Username"/>


facendo:


function input.user.OnClick() {
input.user.text = "";
}

non va...

[_Claudio]

Non riesco a far funzionare il codice che mi hai dato, la mia form è questa:


<input name="user" type="text" size=20 style="width: 149px" value="Username"/>


facendo:


function input.user.OnClick() {
input.user.text = "";
}

non va...

È ovvio, è uno pseudocodice molto personalizzato, devi trasformarlo in javascript funzionante...

[Fede 88]

Infatti un po' ho provato a modificarlo però non riesco a farlo andare.

In javascript la funzione onclick() esiste e può essere usata con una form? Perchè mi sta venendo il dubbio che forse non riesce a gestire l'onclick su di una form.

[_Claudio]

Infatti un po' ho provato a modificarlo però non riesco a farlo andare.

In javascript la funzione onclick() esiste e può essere usata con una form? Perchè mi sta venendo il dubbio che forse non riesce a gestire l'onclick su di una form.

Su una form penso di no, ma su un button sì.

[Fede 88]

però a me serve che lo faccia quando clicco sulla form

[flx2000]

Puoi creare l'input della password come type="text" e value="Password", e modificarlo a type="password" e value="" la prima volta che l'utente ci clicca sopra.

[Fede 88]

Puoi creare l'input della password come type="text" e value="Password", e modificarlo a type="password" e value="" la prima volta che l'utente ci clicca sopra.

Sembra una buona idea, potrebbe funzionare. Il problema è che non so come farlo.

[flx2000]

Ad esempio così:

<input onfocus="if(this.value=='Inserire password'){this.value='';this.type='password'}" onblur="if(this.value==''){this.type='text';this.value='Inserire password'}" name="password" value="Inserire password" type="text">

[Fede 88]

Ad esempio così:

<input onfocus="if(this.value=='Inserire password'){this.value='';this.type='password'}" onblur="if(this.value==''){this.type='text';this.value='Inserire password'}" name="password" value="Inserire password" type="text">

Grazie, ho provato ad inserirlo... per l'username funziona però per la password c'è qualcosa che non va, la form dovrebbe diventare di tipo password ma non lo diventa, infatti quando scrivo la pass, viene visualizzata.

Questo è il codice delle 2 form:

<input onfocus="if(this.value=='Username'){this.value=''}" onblur="if(this.value==''){this.value='Username'}" name="user" value="Username" type="text" size=20 style="width: 149px"/><br />
<input onfocus="if(this.value=='Password'){this.value='';this.type='password'}" onblur="if(this.value==''){this.type='text';this.value='Password'}" name="password" value="Password" type="text" size=20 style="width: 149px"/>

[_Claudio]

type è un membro della classe element del DOM.
Se vuoi ottenere quell'effetto devi fare uno script bello tosto che al focus dell'elemento nasconde quello con scritto "password" e mostra quello di inserimento della password velata con i pallini nella stessa posizione e col cursore all'interno.

[Fede 88]

type è un membro della classe element del DOM.
Se vuoi ottenere quell'effetto devi fare uno script bello tosto che al focus dell'elemento nasconde quello con scritto "password" e mostra quello di inserimento della password velata con i pallini nella stessa posizione e col cursore all'interno.

Bene, non saprei proprio da dove iniziare... Potresti darmi una dritta? In alternativa anche un link dove spiegano qualcosa è bene accetto... :D

[_Claudio]

Bene, non saprei proprio da dove iniziare... Potresti darmi una dritta? In alternativa anche un link dove spiegano qualcosa è bene accetto... :D

L'unica dritta che posso darti è: inizia.

Compra un buon libro sui CSS, guardati qualcosa riguardo a javascript e passa un paio di giorni davanti alla gecko dom reference e alla msdn dom reference.

Buona fortuna

[flx2000]

Grazie, ho provato ad inserirlo... per l'username funziona però per la password c'è qualcosa che non va, la form dovrebbe diventare di tipo password ma non lo diventa, infatti quando scrivo la pass, viene visualizzata.

[...]


Provato con Firefox 3.5.3 funziona benissimo... Non so che dirti.

[Fede 88]

Effettivamente su firefox funziona però su ie no, è normale che su un browser ti permette di cambiare il type e su un altro no?

[flx2000]

E' normale perché non tutti i browser rispettano le specifiche ufficiali del DOM.

E' buona norma provare gli script perlomeno su Firefox, Explorer, Safari e Opera, mentre il mio contributo era mirato a darti un'idea di intervento senza la pretesa di essere il risultato perfetto.

[Fede 88]

Si si, io vedendo che non andava su ie non ero neanche stato li a provarlo su altri browser...

Comunque grazie per l'aiuto

[flx2000]

Prego!