¿Como crear un tipo de textbox Password como el que tiene Win 8 al iniciar sesion?

adryan310 · #1 (**permalink**) 04/07/2013, 15:08

Hola a todos los foreros. Hoy vengo con una duda que creo que mas de uno debe de tenerla tambien.
Quisiera saber como puedo hacer un textbox de tipo password en html o alguna otra libreria o herramienta web, que cuando el usuario quiera ver la contraseña que esta digitando, esta se le muestre. Para ser mas claro vean esta imagen:

Ven un tipo de ojo en el textbox? eso es lo que quisiera saber... y si estoy en el foro equivocado pues diganme donde puedo buscar... gracias

memoadian · #2 (**permalink**) 04/07/2013, 23:32

pues podrias hacer lo siguiente

Código HTML:

Ver original<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <!--======== Basic Page Needs =========-->
 
    <meta charset="utf-8">
    <title>Input</title>
 
    <!--======== Styles =========-->
 
    <style type="text/css">
    span{
        cursor:pointer;
    }
    </style>
 
    <!--======== Scripts =========-->
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('span').click(function(){
            var password = $('.password').val();
            $('input[type="text"]').val(password);
        });
    });
    </script>
</head>
<body>
    <form method="post" action="">
        <input class="password" type="password" value=""/>
        <input type="text" value="">
        <span>Ver contraseña</span>
    </form>
</body>
</html>

solo ingeniate el estilo

adryan310 · #3 (**permalink**) 05/07/2013, 09:19

GRACIAS... FUNCIONA PERFECTO !! Pero ahora mi duda es... como hago para que al presionar en el <span> se le muestre la contraseña pero en el mismo textbox donde digita la contraseña ?

memoadian · #4 (**permalink**) 05/07/2013, 10:16

eso no se puede hacer, tednrías que cambiar el type del input, pero los navegadores modernos no lo permiten.

pero de lo que te puse, puedes ingeniartelas.