• Publicidad

Cambiar tipo de input de password a text (y viceversa)

Preguntas y comentarios relacionadas con HTML y CSS.

Cambiar tipo de input de password a text (y viceversa)

Notapor 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
adrolmar
 

Publicidad

Re: Cambiar tipo de input de password a text (y viceversa)

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

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
  4. <title>No Title</title>
  5. <script language="JavaScript">
  6. function ver_password() {
  7.     var passwd_valor = document.elformulario.input_pass.value;
  8.  
  9.     document.getElementById('passwd_sitio').innerHTML
  10.         = (document.elformulario.input_ver.checked)
  11.         ? '<input type="text"     name="input_pass" value="">'
  12.         : '<input type="password" name="input_pass" value="">'
  13.         ;
  14.  
  15.     document.elformulario.input_pass.value = passwd_valor;
  16. }
  17. </script>
  18.  
  19. </head>
  20. <body>
  21. <form name="elformulario">
  22. <span id="passwd_sitio"><input type="password" name="input_pass" value=""></span>&nbsp;&nbsp;
  23. <input type="checkbox" name="input_ver" value="ver" onclick="ver_password();">
  24. </form>
  25. </body>
  26. </html>
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4


Una forma mejor sería incorporar objetos HTML directamente en el DOM del documento.
Última edición por explorer el 2009-09-14 16:04 @711, editado 3 veces en total
Razón: Cambiado '<div id="passwd" style="display: inline;">' por '<span id="passwd">'. Error en <body>
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cambiar tipo de input de password a text (y viceversa)

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

Re: Cambiar tipo de input de password a text (y viceversa)

Notapor explorer » 2009-09-14 16:31 @730

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

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
  4. <title>No Title</title>
  5. <script language="JavaScript">
  6. function ver_password() {
  7.     var input_form = document.elformulario.input_pass;
  8.  
  9.     if (document.elformulario.input_ver.checked) {
  10.         input_form.setAttribute("type", "text");
  11.     }
  12.     else {
  13.         input_form.setAttribute("type", "password");
  14.     }
  15. }
  16. </script>
  17.  
  18. </head>
  19. <body>
  20. <form name="elformulario">
  21. <input type="password" name="input_pass" value="">&nbsp;&nbsp;<input type="checkbox" name="input_ver" value="ver" onclick="ver_password();">
  22. </form>
  23. </body>
  24. </html>
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


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: :)
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. function ver_password() {
  2.     document.elformulario.input_pass.setAttribute("type",
  3.         document.elformulario.input_ver.checked ? "text" : "password"
  4.     );
  5. }
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


P.D. Se nota que últimamente estoy repasando JavaScript, que lo tenía super oxidado.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cambiar tipo de input de password a text (y viceversa)

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

Re: Cambiar tipo de input de password a text (y viceversa)

Notapor 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
Uriel Lizama Perl programmer fundador de Perl en Español
Perl Programming Language
Avatar de Usuario
kidd
Creador de Perl en Español
Creador de Perl en Español
 
Mensajes: 1166
Registrado: 2003-10-15 16:52 @744
Ubicación: México

Re: Cambiar tipo de input de password a text (y viceversa)

Notapor 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.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cambiar tipo de input de password a text (y viceversa)

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

Re: Cambiar tipo de input de password a text (y viceversa)

Notapor explorer » 2009-09-16 08:36 @400

adrolmar escribiste: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 escribiste: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 :)
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cambiar tipo de input de password a text (y viceversa)

Notapor adrolmar » 2009-09-17 02:29 @145

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 ;)

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


Volver a HTML

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 6 invitados