Foros del Web » Programando para Internet » Javascript »

Efecto asteriscos campo contraseña

Estas en el tema de Efecto asteriscos campo contraseña en el foro de Javascript en Foros del Web. Hola ¿Existe la manera de que en un campo contraseña inicialmente se muestre "Ingrese su contraseña" (así tal cual, caracteres visibles), pero cuando el usuario ...
  #1 (permalink)  
Antiguo 15/03/2007, 13:14
Avatar de Mauri1  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago de Chile
Mensajes: 558
Antigüedad: 21 años, 3 meses
Puntos: 0
Efecto asteriscos campo contraseña

Hola

¿Existe la manera de que en un campo contraseña inicialmente se muestre "Ingrese su contraseña" (así tal cual, caracteres visibles), pero cuando el usuario comienze a escribir, los caracteres se muestren en asteriscos?

Muchas gracias
  #2 (permalink)  
Antiguo 15/03/2007, 17:38
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Re: Efecto asteriscos campo contraseña

Algo así por ejemplo:
Código PHP:
<script>

function 
cambiaApass(caja) {
    var 
nuevo=document.createElement("input");
    
nuevo.setAttribute("type","password");
    
nuevo.setAttribute("name",caja.name);
    
nuevo.setAttribute("value","");
    
document.formulario.replaceChild(nuevo,caja);
    
nuevo.focus();
}

</script>

<form name="formulario">
    <input type="text" value="Contraseña" onfocus="cambiaApass(this)" />
</form> 
Sustituímos el hijo del formulario (la caja normal) por una caja de tipo contraseña, al vuelo, y así al usuario le parecerá la misma (si tienes mas atributos tipo size o formato CSS te recomiendo mantenerlo).


Un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #3 (permalink)  
Antiguo 15/03/2007, 18:09
Avatar de Mauri1  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago de Chile
Mensajes: 558
Antigüedad: 21 años, 3 meses
Puntos: 0
Re: Efecto asteriscos campo contraseña

Genial, muchas gracias derkenuke ;)

Sólo una cosa: hay que hacerle doble clic al campo para poder escribir, ¿sabes cómo solucionarlo?

Saludos
  #4 (permalink)  
Antiguo 15/03/2007, 18:47
 
Fecha de Ingreso: septiembre-2005
Mensajes: 1.289
Antigüedad: 18 años, 5 meses
Puntos: 3
Re: Efecto asteriscos campo contraseña

Por que se le pone una / al final de la linea de codigo donde se crea el TEXT? que indica ese /?
__________________
Wow! No se que decir...
  #5 (permalink)  
Antiguo 16/03/2007, 01:52
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Re: Efecto asteriscos campo contraseña

Hola zyon

En XHTML todas las etiquetas tienen que cerrarse, aunque no tengan etiqueta de cierre, por eso verás códigos como estos:

<input type="submit" />
<img src="imagen.jpg" />
<br />

Saludos,

Última edición por JavierB; 16/03/2007 a las 02:50
  #6 (permalink)  
Antiguo 16/03/2007, 02:45
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 3 meses
Puntos: 61
Re: Efecto asteriscos campo contraseña

Con este pequeño cambio no hará falta que hagas doble click:

Código PHP:
<script>
var 
nuevo;
function 
cambiaApass(caja) {
      
nuevo=document.createElement("input");
    
nuevo.setAttribute("type","password");
    
nuevo.setAttribute("name",caja.name);
    
nuevo.setAttribute("value","");
    
document.formulario.replaceChild(nuevo,caja);
    
setTimeout("nuevo.focus();",100);
}

</script>

<form name="formulario">
    <input type="text" value="Contraseña" onfocus="cambiaApass(this)" />
</form> 
Muy buen código, derkenuke!

Un abrazo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #7 (permalink)  
Antiguo 16/03/2007, 02:55
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Re: Efecto asteriscos campo contraseña

Sí, derkenuke hace códigos muy majetes

Lo que no entiendo es la línea: nuevo.setAttribute("value","");

Se supone que al crear un nuevo elemento, se crea "vacío"

Saludos,
  #8 (permalink)  
Antiguo 16/03/2007, 05:24
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Re: Efecto asteriscos campo contraseña

Bueno, sí, la verdad es que sí. Era para asegurarme. El código a mi también me pareció interesante, bastante útil y bonito. Lo que no me he dado cuenta es que necesitase el timeout para hacer el focus(). Gracias KarlanKas!
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #9 (permalink)  
Antiguo 16/03/2007, 05:28
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 3 meses
Puntos: 61
Re: Efecto asteriscos campo contraseña

Es curioso, porque con el timeout funciona hasta dejando un milisegundo de espera. Se ve que el navegador necesita un tiempecito para hacerse cargo de que tiene un nuevo elemento en el formulario.

También declaro la variable fuera de la function para que sea una variable pública ya que, con el timeout, el focus se ejecuta fuera de la function.
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #10 (permalink)  
Antiguo 16/03/2007, 07:51
 
Fecha de Ingreso: septiembre-2005
Mensajes: 1.289
Antigüedad: 18 años, 5 meses
Puntos: 3
Re: Efecto asteriscos campo contraseña

mis respeto para ustedes, siento que la programacion no se me da mucho, pero veo lo que ustedes pueden hacer y como que me anima a seguir, y no hago la barba jeje, pero es la neta! Saludos a todos!
__________________
Wow! No se que decir...
  #11 (permalink)  
Antiguo 16/03/2007, 12:32
Avatar de Mauri1  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago de Chile
Mensajes: 558
Antigüedad: 21 años, 3 meses
Puntos: 0
Re: Efecto asteriscos campo contraseña

Que fabulosa comunidad!! :P

Saludos y gracias
  #12 (permalink)  
Antiguo 16/03/2007, 21:09
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 2 meses
Puntos: 13
Re: Efecto asteriscos campo contraseña

¿Para qué crear un elemento nuevo?, ¿no bastaría simplemente con modificar el atributo TYPE del campo de texto?.

Código:
<script>
var nuevo;
function cambiaApass(caja) {
    caja.setAttribute('value', '');
    caja.setAttribute('type', 'password');
    setTimeout("caja.focus();",100);
}

</script>

<form name="formulario">
    <input type="text" value="Contraseña" onfocus="cambiaApass(this)" />
</form>
Editado:
1.- El setTimeOut() no me tira en Opera.
2.- Sería mejor trabajar con escuchadores de eventos, porque se hace necesario eliminar el evento FOCUS luego de la primera vez.

Editado 2:
- Volví a probar en Ópera y bastó con un simple caja.focus() sin necesidad del timeout.
__________________
El conocimiento es libre: Movimiento por la Devolución

Última edición por frijolerou; 16/03/2007 a las 21:34
  #13 (permalink)  
Antiguo 17/03/2007, 03:18
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Re: Efecto asteriscos campo contraseña

Hola frijolerou

Lo de cambiar el type del elemento no funciona ni en IE ni en Opera.

Saludos,
  #14 (permalink)  
Antiguo 17/03/2007, 12:19
Avatar de MaBoRaK  
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 2.003
Antigüedad: 20 años, 10 meses
Puntos: 35
Re: Efecto asteriscos campo contraseña

loading...........


deberia ser
Código HTML:
<script>
var nuevo;
function cambiaApass(caja) {
   caja.value="";
   caja.type="password";
}

</script>

<form name="formulario">
    <input type="text" value="Contraseña" onfocus="cambiaApass(this)" />
</form> 

connection closed.
__________________

Maborak Technologies
  #15 (permalink)  
Antiguo 17/03/2007, 12:34
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 2 meses
Puntos: 13
Re: Efecto asteriscos campo contraseña

Tienes razón Javier, otra vez cometí el mismo error
__________________
El conocimiento es libre: Movimiento por la Devolución
  #16 (permalink)  
Antiguo 17/03/2007, 14:37
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Re: Efecto asteriscos campo contraseña

Bueno esta vez el
var nuevo;
no lo queremos para nada
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #17 (permalink)  
Antiguo 30/03/2007, 02:29
 
Fecha de Ingreso: febrero-2007
Ubicación: Valencia
Mensajes: 457
Antigüedad: 17 años
Puntos: 0
Re: Efecto asteriscos campo contraseña

A mi no me hace nada... en lugar de onfocus, he puesto onclick, pero... no me hace nada:

Código:
var nuevo;
function limpiarpass(caja) {
   nuevo=document.createElement("input");
    nuevo.setAttribute("type","password");
    nuevo.setAttribute("name",caja.name);
    nuevo.setAttribute("value","");
    document.logpass.replaceChild(nuevo,caja);
    setTimeout("nuevo.focus();",100);
}

<form name="logpass" lang="es">  
    <li><input type="text" name="pass" onclick="limpiarpass(this)" value="PASSWORD"></li>
  </form>
Porque puede ser? Por el onclick?

Gracias,
  #18 (permalink)  
Antiguo 30/03/2007, 02:45
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 3 meses
Puntos: 61
Re: Efecto asteriscos campo contraseña

Prueba así:
<script>
var nuevo;
function limpiarpass(caja) {
nuevo=document.createElement("input");
nuevo.setAttribute("type","password");
nuevo.setAttribute("name",caja.name);
nuevo.setAttribute("value","");
document.logpass.replaceChild(nuevo,caja);
setTimeout("nuevo.focus();",100);
}
</script>
<form name="logpass" lang="es">
<li><input type="text" name="pass" onfocus="limpiarpass(this)" value="PASSWORD"></li>
</form>
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #19 (permalink)  
Antiguo 30/03/2007, 02:47
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Re: Efecto asteriscos campo contraseña

Hola KarlanKas

Casi mejor que pruebe así:

Código:
function limpiarpass(caja) {
nuevo=document.createElement("input");
nuevo.setAttribute("type","password");
nuevo.setAttribute("name",caja.name);
nuevo.setAttribute("value","");
document.logpass.getElementsByTagName('li')[0].replaceChild(nuevo,caja);
setTimeout("nuevo.focus();",100);
}
Saludos,
  #20 (permalink)  
Antiguo 30/03/2007, 02:54
 
Fecha de Ingreso: febrero-2007
Ubicación: Valencia
Mensajes: 457
Antigüedad: 17 años
Puntos: 0
Re: Efecto asteriscos campo contraseña

KarlanKas con el onfocus tampoco me funciona, me funciona a la perfección como ha dicho JavierB, muchas gracias a los dos.
  #21 (permalink)  
Antiguo 30/03/2007, 09:48
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Re: Efecto asteriscos campo contraseña

Se me pasó totalmente por alto ese detalle. Para una solución global tenemos que sustituir la línea del replaceChild con ésto:
caja.parentNode.replaceChild(nuevo,caja);
Así trabajaremos independientemente de dónde esté anidado caja.

Una sugerencia de presentación (en la que me han salido muchas dudas) es ésta:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
html>
<
head>
    <
title>Sugerencia de presentaciónscript cambiar caja pass</title>
    <
meta name="Author" content="derkeNuke">
    <
style>
        
input {
            
font-size:10px;
            
color:gray;
        }
    </
style>
</
head>

<
body>


<
script language="javascript">

function 
tratarUsuario(caja) {
    if(
caja.value=="Usuario"caja.value="";        // con valor original vaciaremos
    
else if(caja.value=="")    caja.value="Usuario";    // con valor vacío restauraremos valor original
    //un poco de estilo ;-)
    
caja.style.color= (caja.value=="Usuario")?"gray":"black";
}

function 
tratarPass(caja) {
    if(
caja.value=="Contraseña"cambiarCajaPass(caja);        //era valor original, cambiamos a tipo password
    
else if(caja.value==""cambiarCajaNormal(caja);        //estaba vacía, restauramos valor original y caja tipo password
    //el estilo se impone en la función cambiaCajaXXX
}

var 
nuevofuncionFocusfuncionBlur;
function 
cambiarCajaPass(caja) {
    
nuevo=document.createElement("input");
    
nuevo.setAttribute("type","password");
    
nuevo.setAttribute("name"caja.name);
    
nuevo.style.color="gray";
    
//guardamos las funciones de los eventos en variables globales
    
funcionFocus=caja.onfocus;
    
funcionBlur=caja.onblur;
    
caja.parentNode.replaceChild(nuevo,caja);
    
//primero damos el foco a la caja nueva
    
setTimeout"nuevo.focus();" ,100);
    
//después otorgamos los eventos previamente guardados
    
setTimeout( function() {
        
nuevo.onfocus=funcionFocus;
        
nuevo.onblur=funcionBlur;
    },
500);            //despues de haber realizado el foco!!
}
function 
cambiarCajaNormal(caja) {
    
nuevo=document.createElement("input");
    
nuevo.setAttribute("type","text");
    
nuevo.setAttribute("name",caja.name);
    
nuevo.style.color="gray";
    
nuevo.setAttribute("value","Contraseña");
    
//guardamos
    
funcionFocus=caja.onfocus;
    
funcionBlur=caja.onblur;
    
caja.parentNode.replaceChild(nuevo,caja);
    
//otorgamos
    
setTimeout( function() {
        
nuevo.onfocus=funcionFocus;
        
nuevo.onblur=funcionBlur;
    },
100);
}


</script>
<form name="formulario">
        <input type="text" name="user" value="Usuario" onfocus="tratarUsuario(this);" onblur="tratarUsuario(this);" />
        <input type="text" name="pass" value="Contraseña" onfocus="tratarPass(this);" onblur="tratarPass(this);"/>
</form>


</body>
</html> 
Si os parece bien, os pediría que la testeárais un poco, que le metáis caña, a ver dónde falla. Fijáos cómo los eventos se mantienen (como he podido hacerlo..) y da igual cuántas veces se convierte en pass o en caja normal. También observad el efecto cuando vaciamos el campo, como vuelve al estado original. Y también hay un cambio de color en el campo.


Las dudas que me han salido son (no creo que merezca abrir nuevo post):


1) En Firefox, el tamaño de las cajas no varía al hacer la sustitución. En IE la caja de tipo password es más pequeña (en ancho y en alto). ¿A quién se le ocurrió esto? Además en FF lo que se escribe son * y en windows puntos gordos. Si se mantuviera la capacidad de caracteres se tendría que empequeñecer mucho más en FF.
Si tuviera que cambiar el style a las cajas sería un lío porque:

2) He intentado traspasar todo el atributo style de la caja vieja a la caja nueva, pero no he podido. caja.style existe en FF y en IE, pero caja.style[0] en FF da el nombre de la propiedad [0] y en IE no. En FF hacía
Código:
propiedad - caja.style[0]
su valor - caja.style[ caja.style[0] ]
pero en IE no da resultado.

3) Si alguien conoce un método más elegante de pasar todos los eventos, que lo postee por favor. No he sabido hacerlo de otra manera.



Buf cómo está dando de sí 4 líneas de código.


Un saludo y lo siento por haceros leer tanto
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #22 (permalink)  
Antiguo 30/03/2007, 11:30
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años
Puntos: 62
Re: Efecto asteriscos campo contraseña

aqui va mi aporte:

Código HTML:
<html>
<head>
 <script type="text/javascript">
  function cambia(esto)
   {
    esto=document.getElementById(esto);
    esto.setAttribute("type","password");
    esto.value="";
   }
 </script>
</head>
<body>
<form>
 <input name="pass" id="pass" type="text" value="Aqui escribe tu password" onfocus="cambia('pass')" />
</form>
</body>
</html> 
;)
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #23 (permalink)  
Antiguo 30/03/2007, 11:58
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Re: Efecto asteriscos campo contraseña

Hola ZiTAL

Ese código tiene algún defecto

Saludos,
  #24 (permalink)  
Antiguo 30/03/2007, 17:32
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Re: Efecto asteriscos campo contraseña

ZiTAL, un ejemplo de frijolerou ya comentado en este mismo post..
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #25 (permalink)  
Antiguo 31/03/2007, 02:50
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 20 años
Puntos: 62
Re: Efecto asteriscos campo contraseña

que cacotas, es que solo tengo el iceweasel y el konqueror :(
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #26 (permalink)  
Antiguo 13/02/2008, 22:08
 
Fecha de Ingreso: diciembre-2007
Mensajes: 169
Antigüedad: 16 años, 3 meses
Puntos: 6
Re: Efecto asteriscos campo contraseña

Aquí mi aporte me funca bien:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
html>
<
head>
    <
title>Sugerencia de presentaciónscript cambiar caja pass</title>    
    <
style>
    .
input_top 
    
{
        
background-color:#333333;
        
border:1px solid #FFFFFF;
        
color:#FFFFFF;
        
font-family:Verdana,Arial,Helvetica,sans-serif;
        
font-size:9px;
        
text-decoration:none;
    }    
    </
style>
</
head>
<
body>
<
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>
<form name="formulario">

        <input type="password" class="input_top" style="display:none;" name="password" id="password"  onblur="mostrar_text(this);"/>
        <input  name="pass_text" type="text" class="input_top" id="pass_text"  onfocus="mostrar_pass(this);" value=" Clave"/>

</form>
</body>
</html> 

Los otros no me funciono ninguno, excepto el siguiente pero como que esta muy largo el codigo pero igual ta buenisimo: eso adios...

Cita:
Iniciado por derkenuke Ver Mensaje
Se me pasó totalmente por alto ese detalle. Para una solución global tenemos que sustituir la línea del replaceChild con ésto:
caja.parentNode.replaceChild(nuevo,caja);
Así trabajaremos independientemente de dónde esté anidado caja.

Una sugerencia de presentación (en la que me han salido muchas dudas) es ésta:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
html>
<
head>
    <
title>Sugerencia de presentaciónscript cambiar caja pass</title>
    <
meta name="Author" content="derkeNuke">
    <
style>
        
input {
            
font-size:10px;
            
color:gray;
        }
    </
style>
</
head>

<
body>


<
script language="javascript">

function 
tratarUsuario(caja) {
    if(
caja.value=="Usuario"caja.value="";        // con valor original vaciaremos
    
else if(caja.value=="")    caja.value="Usuario";    // con valor vacío restauraremos valor original
    //un poco de estilo ;-)
    
caja.style.color= (caja.value=="Usuario")?"gray":"black";
}

function 
tratarPass(caja) {
    if(
caja.value=="Contraseña"cambiarCajaPass(caja);        //era valor original, cambiamos a tipo password
    
else if(caja.value==""cambiarCajaNormal(caja);        //estaba vacía, restauramos valor original y caja tipo password
    //el estilo se impone en la función cambiaCajaXXX
}

var 
nuevofuncionFocusfuncionBlur;
function 
cambiarCajaPass(caja) {
    
nuevo=document.createElement("input");
    
nuevo.setAttribute("type","password");
    
nuevo.setAttribute("name"caja.name);
    
nuevo.style.color="gray";
    
//guardamos las funciones de los eventos en variables globales
    
funcionFocus=caja.onfocus;
    
funcionBlur=caja.onblur;
    
caja.parentNode.replaceChild(nuevo,caja);
    
//primero damos el foco a la caja nueva
    
setTimeout"nuevo.focus();" ,100);
    
//después otorgamos los eventos previamente guardados
    
setTimeout( function() {
        
nuevo.onfocus=funcionFocus;
        
nuevo.onblur=funcionBlur;
    },
500);            //despues de haber realizado el foco!!
}
function 
cambiarCajaNormal(caja) {
    
nuevo=document.createElement("input");
    
nuevo.setAttribute("type","text");
    
nuevo.setAttribute("name",caja.name);
    
nuevo.style.color="gray";
    
nuevo.setAttribute("value","Contraseña");
    
//guardamos
    
funcionFocus=caja.onfocus;
    
funcionBlur=caja.onblur;
    
caja.parentNode.replaceChild(nuevo,caja);
    
//otorgamos
    
setTimeout( function() {
        
nuevo.onfocus=funcionFocus;
        
nuevo.onblur=funcionBlur;
    },
100);
}


</script>
<form name="formulario">
        <input type="text" name="user" value="Usuario" onfocus="tratarUsuario(this);" onblur="tratarUsuario(this);" />
        <input type="text" name="pass" value="Contraseña" onfocus="tratarPass(this);" onblur="tratarPass(this);"/>
</form>


</body>
</html> 
Si os parece bien, os pediría que la testeárais un poco, que le metáis caña, a ver dónde falla. Fijáos cómo los eventos se mantienen (como he podido hacerlo..) y da igual cuántas veces se convierte en pass o en caja normal. También observad el efecto cuando vaciamos el campo, como vuelve al estado original. Y también hay un cambio de color en el campo.


Las dudas que me han salido son (no creo que merezca abrir nuevo post):


1) En Firefox, el tamaño de las cajas no varía al hacer la sustitución. En IE la caja de tipo password es más pequeña (en ancho y en alto). ¿A quién se le ocurrió esto? Además en FF lo que se escribe son * y en windows puntos gordos. Si se mantuviera la capacidad de caracteres se tendría que empequeñecer mucho más en FF.
Si tuviera que cambiar el style a las cajas sería un lío porque:

2) He intentado traspasar todo el atributo style de la caja vieja a la caja nueva, pero no he podido. caja.style existe en FF y en IE, pero caja.style[0] en FF da el nombre de la propiedad [0] y en IE no. En FF hacía
Código:
propiedad - caja.style[0]
su valor - caja.style[ caja.style[0] ]
pero en IE no da resultado.

3) Si alguien conoce un método más elegante de pasar todos los eventos, que lo postee por favor. No he sabido hacerlo de otra manera.



Buf cómo está dando de sí 4 líneas de código.


Un saludo y lo siento por haceros leer tanto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 23:50.