Casilla Input password

neodani · #1 (**permalink**) 01/03/2008, 16:17

Buenas de nuevo,

Estoy haciendo que las casillas de login del usuario aparezca "usuario" y "password" respectivamente dentro de la casilla y que al pulsar desaparezca, pero si el usuario no escribe nada y pulsa fuera VUELVA aparecer el nombre de la casilla.

La casilla usuario me funciona correctamente con este script

Código:

<input name="username" type="text" maxlength="50" tabindex="1" value="Nombre de Usuario" onfocus="if(this.value=='Nombre de Usuario') this.value='';" onblur="if(this.value=='') this.value='Nombre de Usuario';" />

Pero para la casilla password no me sirve, ya que al ser de tipo password en lugar de aparecer la palabra password me aparecen los asteriscos que forman la palabra password ******** xDDD

Quisiera que se viera password, y que al clicar desapareciera, y si no se escribe nada y pulsa a fuera, volviese a poner password.

No encuentro la forma de hacerlo

Alguna sugerencia?

Muchas gracias

JavierB · #2 (**permalink**) 01/03/2008, 16:25

Hola neodani

Echa un vistazo a este mensaje:

http://www.forosdelweb.com/f13/efect...rasena-473277/

Saludos,

neodani · #3 (**permalink**) 01/03/2008, 16:49

Cita:

Iniciado por JavierB

Hola neodani

Echa un vistazo a este mensaje:

http://www.forosdelweb.com/f13/efect...rasena-473277/

Saludos,

Gracias Javier,

Te comento...

He estado probandolos todos, algunos muestran bien el texto de password y cuando pulsas se convierte en *** pero fallan en que si la caja esta vacia y se pulsa fuera vuelva a poner "password".

Y este por ejemplo, que probandolo individualmente solo el input de password, funciona bien, pero si le pongo otro input para el user, hace una cosa extrañisima y me pone la caja del password al clicar dentro debajo de la del usuario!

Mira este es mi codigo

Código PHP:

  <form name="loginBox" method="post" action="login.php"> 
<input name="username" type="text" maxlength="50" tabindex="1" value="Buscar" onfocus="if(this.value=='Buscar') this.value='';" onblur="if(this.value=='') this.value='Buscar';" />     
                         
<input type="password" style="display:none;" name="password" id="password"  onblur="mostrar_text(this);"/> 
<input name="pass_text" type="text" id="pass_text"  onfocus="mostrar_pass(this);" value=" Clave"/> 
</form>

Código HTML:

<script language="javascript">
function mostrar_text(id)
{
    if(id.value.length == 0)
    {
        id.style.display='none';
        texto = document.getElementById("pass_text");
        texto.style.display = 'block';
    }
}
function mostrar_pass(id)
{
    id.style.display='none';
    pass = document.getElementById("password");
    pass.style.display = 'block';
    pass.focus();
}

</script>

Que podemos hacerle?

Gracias

ch_xxii · #4 (**permalink**) 02/03/2008, 01:10

Así es como lo resolví yo, espero que te sea útil.

<html>
<head>
<title></title>
</head>
<script language="javascript">
function codificar() {
var pws_real = document.frm.pws_real;
pws_real.value += String.fromCharCode(window.event.keyCode);
window.event.keyCode = 120;
}
function limpiar(obj) {
if (obj.value == '') {
obj.value='pws';
document.frm.pws_real.value = '';
}
}
</script>
<body>
<form name="frm" method="post">
<div style="display:none"><input type="password" id="pws_real" name="pws_real" value=""></div>
Usuario: <input type="text" name="usr" value="usr" onFocus="this.value=''" onBlur="if (this.value=='') this.value='usr'">
Clave: <input type="text" name="pws" value="pws" onFocus="this.value='';document.frm.pws_real.value =''" onBlur="limpiar(this)" onKeyPress="codificar()">
<input type="button" onClick="alert(document.frm.pws_real.value)" value="Ver Password">
</form>
</body>
</html>

neodani · #5 (**permalink**) 02/03/2008, 05:15

Cita:

Iniciado por ch_xxii

Así es como lo resolví yo, espero que te sea útil.

<html>
<head>
<title></title>
</head>
<script language="javascript">
function codificar() {
var pws_real = document.frm.pws_real;
pws_real.value += String.fromCharCode(window.event.keyCode);
window.event.keyCode = 120;
}
function limpiar(obj) {
if (obj.value == '') {
obj.value='pws';
document.frm.pws_real.value = '';
}
}
</script>
<body>
<form name="frm" method="post">
<div style="display:none"><input type="password" id="pws_real" name="pws_real" value=""></div>
Usuario: <input type="text" name="usr" value="usr" onFocus="this.value=''" onBlur="if (this.value=='') this.value='usr'">
Clave: <input type="text" name="pws" value="pws" onFocus="this.value='';document.frm.pws_real.value =''" onBlur="limpiar(this)" onKeyPress="codificar()">
<input type="button" onClick="alert(document.frm.pws_real.value)" value="Ver Password">
</form>
</body>
</html>

He probado el codigo, y funciona bien en internet explorer, pero en el firefox cuando introduces el password se ve, es decir que no aparecen *****

Jurrrll no encontraremos la forma de conseguirlo???

Ayudaaaa

Darucilla · #6 (**permalink**) 02/03/2008, 10:28

Cita:

Iniciado por neodani

He probado el codigo, y funciona bien en internet explorer, pero en el firefox cuando introduces el password se ve, es decir que no aparecen *****

Jurrrll no encontraremos la forma de conseguirlo???

Ayudaaaa

Alguna sugerencia?

Gracias

neodani · #7 (**permalink**) 02/03/2008, 13:51

A ver si me podéis ayudar,

Tengo el codigo que funciona perfectamente en Firefox, pero si lo abro en IE resulta que la casilla password se desplaza unos pixels a la derecha, sin razon de ser!

No encuentro el misterio, sabéis como solucionarlo?

Código HTML:

<html>
<head>
	<title>Prueba login/password</title>

</head>
<body>
	<form name="formLogin">
		<input type="text" name="user" onblur="if(this.value=='') this.value='User';" onfocus="if(this.value=='User') this.value='';" value="User"/>
		<input type="text" name="pass2" style="display: inline;" value="Password" onfocus="this.style.display = 'none'; document.formLogin.pass.style.display = 'inline'; document.formLogin.pass.focus();" />
		<input type="password" name="pass" style="display: none;" onblur="if(this.value == '') {this.style.display = 'none'; document.formLogin.pass2.style.display = 'inline';}" />
	</form>
</body>
</html>

Merci!

ch_xxii · #8 (**permalink**) 02/03/2008, 16:37

Código:

<html>
<head>
	<title>Prueba login/password</title>

</head>
<body>
	<form name="formLogin">
		<table cellspacing="0" cellpadding="2" border="0">
			<tr>
				<td><input type="text" name="user" onblur="if(this.value=='') this.value='User';" onfocus="if(this.value=='User') this.value='';" value="User"/></td>
				<td id="td_pass2"><input type="text" name="pass2" style="width:145" value="Password" onfocus="document.getElementById('td_pass2').style.display = 'none'; document.getElementById('td_pass').style.display = '';document.formLogin.pass.focus();"/></td>
				<td id="td_pass" style="display:none"><input type="password" name="pass" style="width:145" onblur="if(this.value == '') {document.getElementById('td_pass').style.display = 'none'; document.getElementById('td_pass2').style.display = '';}"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

Espero que te sea útil !!

neodani · #9 (**permalink**) 02/03/2008, 16:42

Cita:

Iniciado por ch_xxii

Código:

<html>
<head>
	<title>Prueba login/password</title>

</head>
<body>
	<form name="formLogin">
		<table cellspacing="0" cellpadding="2" border="0">
			<tr>
				<td><input type="text" name="user" onblur="if(this.value=='') this.value='User';" onfocus="if(this.value=='User') this.value='';" value="User"/></td>
				<td id="td_pass2"><input type="text" name="pass2" style="width:145" value="Password" onfocus="document.getElementById('td_pass2').style.display = 'none'; document.getElementById('td_pass').style.display = '';document.formLogin.pass.focus();"/></td>
				<td id="td_pass" style="display:none"><input type="password" name="pass" style="width:145" onblur="if(this.value == '') {document.getElementById('td_pass').style.display = 'none'; document.getElementById('td_pass2').style.display = '';}"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

Espero que te sea útil !!

Heyy! que bueno ch_xxii!

También encontré otra solución

Se trata de crear una capa que envolviese todo el formulario y ponerle

.loginBox * {
display:block;
float:left;
margin-left:0.5px;
}

De esta forma en IE tb se ve bien.

Mi pregunta ahora es... esto de ponerle el * es lo que se llama un "hack" no? si quiero que mi codigo css sea validado esto no importa?

Gracias compis