onFocus en una imagen para mostra u ocultar un text tipo password

fmb1982 · #1 (**permalink**) 06/11/2015, 12:28

Alguien sabe por que no me jala esto, quiero mostra u ocultar el contenido del Text

Código HTML:

function mostrar()
{
contenido = document.getElementById("Password");
atributo = contenido.getAttribute("type");
contenido.setAttribute("type","password")
}

function ocultar()
{
contenido = document.getElementById("Password");
atributo = contenido.getAttribute("type");
contenido.setAttribute("type","text")
}

input type="text" name="Login" id="Login" class="tam" value="Login" style="text-align:center" onClick="limpia(this)" onBlur="verifica(this)" ><BR>
<input type="password" name="Password" id="Password" class="tam" value="Password" style="text-align:center" onClick="limpia(this)" onBlur="verifica(this)" > 
<img src="ojo.jpg" width="20" height="20" border="0" onFocus="mostrar()" onBlur="ocultar()" />

Alexis88 · #2 (**permalink**) 06/11/2015, 14:53

Si con la imagen pretendes ejecutar las funciones, el evento click sería el más adecuado; además, el tipo de elemento que asignas en ambas funciones, está dado de la forma contraria. Para mostrar, debe ser de tipo "text" y para ocultar, de tipo "password".

Un saludo

gonzaherrera77 · #3 (**permalink**) 06/11/2015, 15:06

Para orientarte un poco, solo pude esconder la caja y no el contenido de adentro.

Código Javascript:

Ver original<!DOCTYPE html>
<html>
   <head>
      <title>titulo de la pagina</title>
      <meta charset="utf-8">
      <script>
         function mostrar() {
            document.getElementById('user').setAttribute("style", "visibility: visibility;");
         }
         function ocultar() {
            document.getElementById('user').setAttribute("style", "visibility: hidden;");
         }
      </script>
   </head>
   <body>
      <form action="#" method="get">
         <table align="center">
            <tr>
               <th colspan="2">Formulario</th>
            </tr>
            <tr>
               <td>Usuario:</td>
               <td><input type="text" id="user" /></td>
            </tr>
               <td>Contraseña:</td>
               <td><input type="password" name="password" /></td>
            </tr>
               <td colspan="2" align="center"><input type="button" value="Mostrar" onClick="mostrar();"/>
               <input type="button" value="Ocultar" onClick="ocultar();"/></td>
            </tr>
         </table>
      </form>
   </body>
</html>

¡Saludos!

fmb1982 · #4 (**permalink**) 06/11/2015, 19:13

ya lo resolvi pero con OnMouseOver y OnMouseOut

function mostrar()
{
contenido = document.getElementById("Password");
atributo = contenido.getAttribute("type");
contenido.setAttribute("type","text")
}

function ocultar()
{
contenido = document.getElementById("Password");
atributo = contenido.getAttribute("type");
contenido.setAttribute("type","password")
}

<img src="ojo.jpg" width="20" height="20" border="0" onMouseover="mostrar()" onMouseout="ocultar()" />

Alexis88 · #5 (**permalink**) 06/11/2015, 22:14

¿Por qué tomas al tipo de elemento y lo almacenas en la variable atributo si nunca la usas?

Por cierto, otra forma más corta de asignar el tipo de elemento es mediante la propiedad type:

Código Javascript:

Ver originalelemento.type = "el tipo";

Un saludo