Ver Tema - Cambiar tipo de input de password a text (y viceversa)

adrolmar · 2009-09-12 12:38 @568

¡Hola!

Lo que trato de hacer es simple (la idea): tengo un formulario con un campo de tipo password en el que el usuario mete ahí su contraseña, ¡cómo no!. Al lado de este campo tengo un checkbox mediante el cual quiero que al pulsarse se muestre la contraseña en claro. Del mismo modo, cuando se vuelva a pulsar en el checkbox (se desmarque) la contraseña vuelve a mostrarse con asteriscos como hacía antes.

He leído en foros de diseño web pero probándolo en mi código no resulta del todo...

Básicamente he probado a crear otro objeto de tipo text y reemplazar el de tipo password existente. Como digo, no me ha funcionado.

¿Alguna sugerencia?

Gracias

explorer · 2009-09-12 15:21 @681

Esta es una forma de hacerlo: metiendo la caja de entrada en un <span> y cambiando el código HTML de su interior.

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>No Title</title>
<script language="JavaScript">
function ver_password() {
    var passwd_valor = document.elformulario.input_pass.value;
 
    document.getElementById('passwd_sitio').innerHTML
        = (document.elformulario.input_ver.checked)
        ? '<input type="text"     name="input_pass" value="">'
        : '<input type="password" name="input_pass" value="">'
        ;
 
    document.elformulario.input_pass.value = passwd_valor;
}
</script>
 
</head>
<body>
<form name="elformulario">
<span id="passwd_sitio"><input type="password" name="input_pass" value=""></span>&nbsp;&nbsp;
<input type="checkbox" name="input_ver" value="ver" onclick="ver_password();">
</form>
</body>
</html>

Una forma mejor sería incorporar objetos HTML directamente en el DOM del documento.

adrolmar · 2009-09-14 12:44 @572

¡Hola de nuevo!

Sencillamente eficaz, limpio y justo lo que necesitaba.
Funciona al 100%.
Una vez más, explorer.. ¡GRACIAS!

explorer · 2009-09-14 16:31 @730

Pues manejando el DOM, la solución es incluso más corta y simple:

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>No Title</title>
<script language="JavaScript">
function ver_password() {
    var input_form = document.elformulario.input_pass;
 
    if (document.elformulario.input_ver.checked) {
        input_form.setAttribute("type", "text");
    }
    else {
        input_form.setAttribute("type", "password");
    }
}
</script>
 
</head>
<body>
<form name="elformulario">
<input type="password" name="input_pass" value="">&nbsp;&nbsp;<input type="checkbox" name="input_ver" value="ver" onclick="ver_password();">
</form>
</body>
</html>

Resulta que es tan sencillo como cambiar el atributo del elemento.

No se necesita cambiar ni interpretar HTML, ni estar dentro de un <div> o <span>...

Es tan corto que se podría poner en el mismo evento onclick() del control:

Syntax: [ Download ] [ Hide ]

Using javascript Syntax Highlighting

function ver_password() {
    document.elformulario.input_pass.setAttribute("type",
        document.elformulario.input_ver.checked ? "text" : "password"
    );
}

P.D. Se nota que últimamente estoy repasando JavaScript, que lo tenía super oxidado.

adrolmar · 2009-09-15 08:01 @376

Hola,
Probaré tu versión DOM..

Edito: ¡¡Arrghh!! IE detecta errores y no cambia la propiedad type

En Opera y en Firefox funciona perfecto. Supongo que era eso a lo que se referían en los foros...

Esto del DOM sí que parece intuitivo y sencillo. El caso es que más de una vez me he topado en algún foro con el dilema DOM vs. innerHTML por ejemplo. Y parece ser que no se ponen de acuerdo en qué solución es la adecuada. Según leí DOM era un estándar pero al parecer IE no interpretaba correctamente, y por eso se recurría al innerHTML por hacer las cosas funcionales para IE (no recuerdo exactamente, ¡quizá incluso lo recuerde al revés!). Yo necesito que el código funcione perfectamente tanto en IE, como en Opera y Firefox, si me funciona bien con DOM me quedo con él.

Corrígeme si me equivoco, a ver si por fin aclaro esa duda que me ronda la cabeza con todo esto del HTML dinámico.

Gracias de nuevo, explorer.

kidd · 2009-09-15 08:49 @409

Es justamente por eso que la mejor solución al trabajar con el DOM es usar librerías ya existentes de JavaScript que se llevaron todo el trabajo en hacerlo totalmente cross-browser. Las que yo te recomiendo son:

JQuery - http://jquery.com/
prototype - http://www.prototypejs.org/

Si vas a hacer mucho desarrollo con JavaScript, te recomiendo que aprendas a utilizar alguna de las librerías anteriores y que las uses siempre, te van a resolver muchos dolores de cabeza.

Saludos

explorer · 2009-09-15 10:05 @462

Pues no comparto parte de lo que dice kidd...

A mí, eso de usar cross-browser no es más que funciones y métodos con miles de líneas if() para hacer las cosas según estemos en un navegador o en otro. Al final, tu aplicación se convierte en un elefante que necesita un doble procesador con doble núcleo para mover cada pata de ese bicho.

adrolmar: si funciona en Firefox, tu no tienes problemas. El problema es la gente que se empeña en seguir usando software "pseudo-compatible" con los estándares.

Lo que debes hacer es: tanto en el servidor (mirando los referer) o desde el cliente (con JavaScript), miras a ver si el usuario que visita tu página usa IE. Entonces, le rediriges a otra en la que le comentas que está usando un navegador no conforme a los estándares, y le animas a que pulse el enlace siguiente para que se baje e instale el Firefox.

El usuario tardará 5-10 minutos en bajarlo, instalarlo y arrancarlo.

Problema resuelto. Y además, no tendrás más problemas de "compatibilidad" en el futuro, por lo que tardarás menos en hacer los desarrollos.

adrolmar · 2009-09-16 08:12 @383

Hola,
menudo debate interesante salió a la palestra...
¡de esos de echar unas cuantas horas!

Personalmente yo pasaría de programar nada para M$ y derivados (IE), pero esto es curro y a veces tienes que claudicar para hacer las herramientas compatibles al 100% con la mayoría de los usuarios sea cual sea su preferencia de SO y de navegador, en este caso.

Así que finalmente coloqué el innerHTML y bueno, ni que decir tiene que mucho más rápido, corto y claro el método con DOM, pero en fin, así son las cosas.

Sólo queda dar una vez más las gracias a todos (kidd y explorer).

¡Hasta otra!

explorer · 2009-09-16 08:36 @400

adrolmar escribió:

Personalmente yo pasaría de programar nada para M$ y derivados (IE), pero esto es curro y a veces tienes que claudicar para hacer las herramientas compatibles al 100% con la mayoría de los usuarios sea cual sea su preferencia de SO y de navegador, en este caso.

Te equivocas: no estás haciendo herramientas compatibles, estás compatibilizando tu desarrollo al modo de funcionar de otras herramientas. Eso, díselo a tu jefe, es perder tiempo y dinero. Todos los programadores sabemos lo que es tener una solución en mente, y de repente "poner los pies en el suelo" por culpa de las 'excepciones' imprevistas. Bueno, si el jefe te sigue pagando las horas, estupendo.

Y no se trata de programar o no para Micro$oft. Es una empresa grande con grandes productos y con una enorme base de usuarios en el ámbito doméstico. Si trabajas en ese contexto es normal que te veas obligado a hacerlo así. Pero entonces, ¿por qué hay países en los que ya se supera el uso de Firefox al del IE?

Si te mueves en otros contextos, como la administración o las grandes empresas, el tipo de software y hardware que utilizan es bien distinto.

adrolmar escribió:

Así que finalmente coloqué el innerHTML y bueno, ni que decir tiene que mucho más rápido, corto y claro el método con DOM, pero en fin, así son las cosas.

Pues no señor... ¿dónde está el espíritu rebelde de la juventud? ¿Es que somos todos unos borregos?

Yo, en la empresa donde estoy prestando servicios, el jefe ya sabe desde hace un tiempo que, tarde o temprano me iré de allí, porque, casi desde el principio le dije "esta será la última empresa en la que trabajaré con productos Micro$oft". Estuvo un rato pensando qué podría significar eso... además, es una empresa partner de IBM, así que todas los semanas estoy mandándole noticias como esta.

De momento, desde hace unas semanas, ya formo parte de la asociación nacional de empresas de software libre, ASOLIF, así que con más motivo

adrolmar · 2009-09-17 02:29 @145

Citar:

adrolmar escribió:
Personalmente yo pasaría de programar nada para M$ y derivados (IE), pero esto es curro y a veces tienes que claudicar para hacer las herramientas compatibles al 100% con la mayoría de los usuarios sea cual sea su preferencia de SO y de navegador, en este caso.

Te equivocas: no estás haciendo herramientas compatibles, estás compatibilizando tu desarrollo al modo de funcionar de otras herramientas. Eso, díselo a tu jefe, es perder tiempo y dinero. Todos los programadores sabemos lo que es tener una solución en mente, y de repente "poner los pies en el suelo" por culpa de las 'excepciones' imprevistas. Bueno, si el jefe te sigue pagando las horas, estupendo.

Bueno, realmente mi jefe piensa que es mejor programar sin 'pillarse los dedos' siempre y cuando no suponga mucho esfuerzo, tampoco es que lo exija, pero si puede funcionar en todos los navegadores -independientemente de si cumplen o no los estándares o no- mejor que mejor, más que nada para evitar incidencias del tipo "esto no me va... bla bla". Para hacerlo más portable, únicamente.

Suena bien eso de ASOLIF, le echaré un vistazo

Citar:

Yo, en la empresa donde estoy prestando servicios, el jefe ya sabe desde hace un tiempo que, tarde o temprano me iré de allí, porque, casi desde el principio le dije "esta será la última empresa en la que trabajaré con productos Micro$oft". Estuvo un rato pensando qué podría significar eso... además, es una empresa partner de IBM, así que todas los semanas estoy mandándole noticias como esta.

No funciona el enlace (quizá temporalmente)

Gracias un vez más
¡Saludos!

Publicidad

Socializa