campo password con scritta

emanuelevt

Utente Attivo
24 Giu 2009
298
0
0
Come si fa in un input password a mettere il valore 'Password' senza che questo compaia a "puntini criptati"; bensì questi appariranno solamente quando ci si scrive sopra;

ad esempio facebook;
http://www.facebook.com/index.php?

guardate nel campo in alto a destra password...
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
io farei una piccola aggiunta perchè appena vai sul campo appaiono i puntini

HTML:
<input type="text" value="inserisci password" onfocus="this.type='password'; this.value='';" />

in queato modo al onfocus il campo rimane bianco
 

emanuelevt

Utente Attivo
24 Giu 2009
298
0
0
Allora ragazzi - tramite il vostro codice praticamente il campo inizialmente è text ma appena riceve il focus diventa una password... ma nn mi funziona... ho notato solo se entrambi i campi (iniziale e focus) coincidono - quindi se entrambi password o entrambi text al momento del focus - il valore è pari a '' - ma se nn coincidono il focus nn mi fa niente dove sbaglio? vi posto il codice:

Codice:
<form action='' method=''>
<input type="text" value="Password" onfocus="this.type='password'; this.value='';" />
<input type="submit" />
</form>
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
ho guardato in alto a dx su face e (sembrerebbe) che l'effetto che vorresti ottenere sia ottenuto con i css

<input class="inputpassword hidden_elem" id="pass" name="pass" value="" type="password">

forse sua maesta Alexander I° I.O.F., sa dirti (spero) qualcosa
 
Ultima modifica:

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
24
Roma
alessandro1997.netsons.org
Ho provato a spulciare nel CSS ma non ne ho ricavato grandi informazioni, non sembra che ci sia nulla di riconducibile alla scritta che scompare quando l'input è in focus. L'unica tecnica che mi viene in mente con il CSS sarebbe un'immagine in background che scompare quando l'input è in focus, così:
Codice:
input.passwd {
  background: url("tuaimg.jpg");
}
input.passwd:focus {
  background: none;
}
Qualcuno ha altre idee?
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
24
Roma
alessandro1997.netsons.org
Infatti ho controllato anche l'eventuale inclusione di qualche file Javascript, e ne ho trovato solamente uno che però non mi sembra sia adibito allo scopo di modificare il valore e il tipo del campo password, penso che sia una specie di framework, anche se sconosciuto :D
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
ho provato, ha un(forse) difetto:
inizialmente appare il campo di input con il back
quando scrivi la password il back scompare e scrivi con i puntini
quando clicchi fuori (o sul submit o da altra parte) riappare il bck però con i puntini
 

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
24
Roma
alessandro1997.netsons.org
Questo infatti potrebbe essere un problema. Allora tanto vale fare come Facebook, ossia che il background scompare quando ci clicchi e non ricompare più. Basta modificare:
Codice:
input.passwd:focus
Con:
Codice:
input.passwd:click
Purtroppo con CSS non si fanno i miracoli :D
 

MarcoGrazia

Utente Attivo
15 Dic 2009
813
18
18
60
Udine
www.stilisticamente.com
http://www.webmaster-risorse.com/javascript/eventi/onblur.asp

Ad ogni modo mi pare una roba allucinante quella di FB, ma d'altronde si sa che non sono proprio dei geni della codifica.
Ma non bastava usare un semplice campo testo al posto del campo password?
Poi attraverso javascript modificavi i caratteri che appaiono a video per non far apparire il testo digitato, non prima di aver inserito il vero valore in una variabile.
Che so:
Codice:
<input class="password" type="text" id="pass" name="password" value="" onkeyup="cambiaValore(this.non ricordo come si rileva il carattere premuto ma non è il value :-) )" />
.....

var pass = '';
function cambiaValore(carattere) {
  pass = pass + carattere;
  document.elementByTagId('pass').value = chr(254);
}
Poi quando premi il bottone per l'invio del contenuto del form lo fai sempre tramite javascript recuperando anche il valore di pass.
La classe password è un css che porta uno sfondo con su scritto qualche cosa, lo sfondo va tolto non appena uno ci fa click col mouse o il campo prende il focus. Insomma questo ve lo fate voi.
Ovviamente l'accessibilità per chi non usa javascript va a farsi benedire, ma d'altra parte anche l'accessibilità di FB fa schifo eppure ho amici ciechi che hanno dovuto imparare ad usare il social network più usato al mondo.
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
x s.m.i. Alexander: ecco il codice

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>prove campo input password</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
input.passwd {
  background: url("password.jpg");
}
input.passwd:focus {
  background: none;
}
-->
</style>
</head>
<body>
<?php
if(isset($_POST['Submit'])){
echo $_POST['pass']."<br>";
}
?>
<form action="provaPASSWORD.php" method="post">
  <input type="password" value="" class="passwd" name="pass" />
  <p>
    <input type="submit" name="Submit" value="Invia"> 
  </p>
</form>
</body>
</html>

comunque ora prova (con difficoltà) quanto ha scritto marcograzia
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Campo password non accettato Classic ASP 1
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
A pulsante di update campo mysql con javascript Javascript 2
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
D riempire campo inserendo un valore in un altro campo PHP 2
S riflettere valore di campo input range in live Javascript 0
P Ricerca campo data PHP 1
M Aggiornare stesso campo in due tabelle PHP 0
U Campo vuoto data errore Fatal error: PHP 2
Alex_70 Aggiornare campo da un altro campo PHP 16
F Steps campo input field Javascript 1
N Chiave Primaria in Campo Calcolato Windows e Software 1
I Focus su un campo Javascript 9
Alex_70 Nascondere label tab se campo vuoto PHP 2
G Impostare suggerimenti campo text di un form Javascript 2
Shyson Inserire placeholder nel campo cerca PHP 5
B Campo ricerca domini HTML e CSS 4
D verifica codice fiscale persona fisica /aziendale stesso campo HTML e CSS 1
G Campo Not null a condizione MySQL 8
M [PHP] Compilare automaticamente il campo data PHP 5
M [PHP] Problemi di salvataggio su campo calcolato PHP 0
M [PHP] Salvare campo di una tabella in una variabile PHP 14
M [MySQL] CREARE UN LINK SU UN DETERMINATO CAMPO DI UNA TABELLA RISULTATO DI UNA QUERY SQL MySQL 3
D [ASP] Leggere Campo decimal MYSQL Classic ASP 1
S [ASP] SALVARE VALORE SELECT OPTION SU CAMPO TABELLA ACCESS Classic ASP 9
M [PHP] Drop down in campo select PHP 1
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
elpirata [MYSQL] Schedulare evento per update del campo data su tabella MySQL 0
G Campo HTML input file con jQuery jQuery 0
D [MS Access] problemi con inserimento campo in una maschera MS Access 6
Arcadia [MS Access] Focus su campo specifico MS Access 1
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
A [MySQL] Ottenere più risultati in un unico campo MySQL 7
A [MS Access] Somma Campi se in altro campo presente un determinato testo MS Access 1
Monital [PHP]Far riconoscere stringa o numerico epr creazione campo tabella PHP 6
Monital Funzione php e campo database come variabile PHP 6
C [PHP] Creare un Pulsante che ricopia valori di un campo in altro record PHP 4
G [Javascript] Campo a comparsa di select Javascript 0
A [Javascript] Somma di un campo in una tabella dinamica Javascript 0
L [PHP] case then e campo non riconosciuto PHP 0
A [PHP] Modificare campo database in base alla scelta dell'utente PHP 2
C [PHP] Estrapolare solo l'anno da una data di nascita inserita in un campo PHP 8
Store creazione campo search in php PHP 1
A [MySQL] riordinare campo criptato MySQL 1
M [PHP] valore tabella in campo form PHP 1
M valore tabella in campo form Presentati al Forum 1
gandalf1959 [PHP] Dividere un campo di testo in più campi PHP 9
LalaGp [PHP] Incremento di un campo numerico in base a incremento campo di testo PHP 2

Discussioni simili