campo password con scritta

[emanuelevt]

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...

 

[alessandro1997]

Prova così:

<input type="text" value="Password" onfocus="this.type='password';" />

 

[borgo italia]

ciao
io farei una piccola aggiunta perchè appena vai sul campo appaiono i puntini

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

in queato modo al onfocus il campo rimane bianco

 

[alessandro1997]

Ah, sì, mi sembrava di essermi dimenticato qualcosa

 

[borgo italia]

ciao
non devi scusarti, ma talvolte succede

Ah, sì, mi sembrava di essermi dimenticato qualcosa

ad una certa età ci si dimentica le cose vicine, ma si ricorda il passato "remoto"

 

[emanuelevt]

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:

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

 

[borgo italia]

ciao
in effetti ha un "piccolo" difetto: con firefox funzia, con IE8 no.

 

[emanuelevt]

vabbene il solito i.e. .... grazie lo stesso

 

[borgo italia]

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

 

[alessandro1997]

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ì:

input.passwd {
  background: url("tuaimg.jpg");
}
input.passwd:focus {
  background: none;
}

Qualcuno ha altre idee?

 

[borgo italia]

s.m.i Alexander
mi scusi, non potrebbe derivare da un js?
comunque adesso, per curiosità, provo poi ev. Le so dire
s.u.s borgo

 

[alessandro1997]

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

 

[borgo italia]

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]

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:

input.passwd:focus

Con:

input.passwd:click

Purtroppo con CSS non si fanno i miracoli

 

[borgo italia]

ciao

Purtroppo con CSS non si fanno i miracoli

i css no, ma pensavo che chi è assurto all'empireo si:crying:.

con click (e anche con onclick) non funzia, rimane sempre il bck

 

[alessandro1997]

Prova con onfocus (scompare il background) e onblur (ricompare).

 

[borgo italia]

ciao
nisba
anzi l'onfocus e l'onblur nemmelo li accetta.
forse bisogna sperare in un mago del js (luke e/o eliox)

 

[alessandro1997]

Fammi un po' vedere che codice stai usando...

 

[MarcoGrazia]

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:

<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]

ciao
x s.m.i. Alexander: ecco il codice

<!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