Efecto asteriscos campo contraseña

[Mauri1]

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

[derkenuke]

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.

[Mauri1]

Genial, muchas gracias derkenuke ;)

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

Saludos

[zyon]

Por que se le pone una / al final de la linea de codigo donde se crea el TEXT? que indica ese /?

[JavierB]

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,

[KarlanKas]

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!

[JavierB]

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,

[derkenuke]

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!

[KarlanKas]

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.

[zyon]

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!

[Mauri1]

Que fabulosa comunidad!! :P

Saludos y gracias

[frijolerou]

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

[JavierB]

Hola frijolerou

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

Saludos,

[MaBoRaK]

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.

[frijolerou]

Tienes razón Javier, otra vez cometí el mismo error

[derkenuke]

Bueno esta vez el
var nuevo;
no lo queremos para nada

[Capi666]

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,

[KarlanKas]

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>

[JavierB]

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,

[Capi666]

KarlanKas con el onfocus tampoco me funciona, me funciona a la perfección como ha dicho JavierB, muchas gracias a los dos.

[derkenuke]

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ón: script 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 nuevo, funcionFocus, funcionBlur;
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

[ZiTAL]

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> 

;)

[JavierB]

Hola ZiTAL

Ese código tiene algún defecto

Saludos,

[derkenuke]

Sí ZiTAL, un ejemplo de frijolerou ya comentado en este mismo post..

[ZiTAL]

que cacotas, es que solo tengo el iceweasel y el konqueror :(

[albertcito]

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ón: script 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...

Iniciado por derkenuke

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ón: script 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 nuevo, funcionFocus, funcionBlur;
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