Buen día a todos,

Tengo un formulario que tiene un campo de contraseña:

<input type="password" name="password" size="30" />

Naturalmente, el texto de entrada, será reemplazado por (*).

Por lo que si el usuario escribió 123 el cuadro mostrará ***.

Hasta aquí, es sencillo, pero…

Ahora, quiero agregar un pequeño icono al lado de la casilla de contraseña de modo que cuando el usuario pase el ratón sobre este icono, se puede ver lo que él ha introducido hasta el momento.

Así, al pasar el mouse, el cuadro mostrará 123 y cuando el usuario abandona el icono de la caja debe mostrar *** de nuevo.

Hay alguna forma de hacer esto con JavaScript? También, estoy usando HTML y PHP.

EDICIÓN:

Realmente no se necesita ser un icono, podría ser una casilla de verificación o un botón… Y si se podría hacer con CSS, realmente apreciaría saber cómo

P. S. he buscado en google y la búsqueda de la stackoverflow, pero no hubo suerte

  • Usted necesita tener javascript para esto. La adición de un «mouseover/mouseout» en el icono como los eventos a gancho de trabajo. A continuación, sólo tiene que cambiar el <input> campo «texto» y de vuelta a la «contraseña». Este post es relevante albertech.blogspot.com/2017/05/…
InformationsquelleAutor SULTAN | 2014-03-18

10 Comentarios

  1. 36

    Usted necesita para obtener el cuadro de texto a través de javascript cuando se mueve el ratón sobre él y cambiar su type a text. Y cuando se mueve hacia fuera, usted desea cambiar de nuevo a password. No hay posibilidad de hacer esto en puro CSS.

    HTML:

    <input type="password" name="password" id="myPassword" size="30" />
    <img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />

    JS:

    function mouseoverPass(obj) {
      var obj = document.getElementById('myPassword');
      obj.type = "text";
    }
    function mouseoutPass(obj) {
      var obj = document.getElementById('myPassword');
      obj.type = "password";
    }
    • funcionó bien en chrome y Firefox pero no en IE.. he IE 10
    • Esto funciona bien con IE 10, voy a apagar la Vista de compatibilidad. ¿Qué acerca de la edad Erótico?
    • Esto es bastante básico y de bajo nivel de javascript por lo que este debe ser compatible con muy antiguas de los navegadores.
  2. 15

    Como estos chicos dijo, sólo cambia el tipo de entrada.

    Pero no se olvide de cambiar el tipo de copia de seguridad así.

    Ver a mi simple jquery demo: http://jsfiddle.net/kPJbU/1/

    HTML:

    <input name="password" class="password" type="password" />
    <div class="icon">icon</div>

    jQuery:

    $('.icon').hover(function () {
        $('.password').attr('type', 'text');
    }, function () {
        $('.password').attr('type', 'password');
    });
  3. 8

    Yo uso esta línea de código, debe hacerlo:

    <input type="password"
           onmousedown="this.type='text'"
           onmouseup="this.type='password'"
           onmousemove="this.type='password'">
    • Debe ser onmouseover y onmouseout.
  4. 7

    Ejemplo completo a continuación. Me encanta el copiar/pegar 🙂

    HTML

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
               <div class="panel panel-default">
                  <div class="panel-body">
                      <form class="form-horizontal" method="" action="">
    
                         <div class="form-group">
                            <label class="col-md-4 control-label">Email</label>
                               <div class="col-md-6">
                                   <input type="email" class="form-control" name="email" value="">
                               </div>
                         </div>
                         <div class="form-group">
                           <label class="col-md-4 control-label">Password</label>
                              <div class="col-md-6">
                                  <input id="password-field" type="password" class="form-control" name="password" value="secret">
                                  <span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
                              </div>
                         </div>
                     </form>
                  </div>
               </div>
          </div>
      </div>

    CSS

    .field-icon {
      float: right;
      margin-right: 8px;
      margin-top: -23px;
      position: relative;
      z-index: 2;
      cursor:pointer;
    }
    
    .container{
      padding-top:50px;
      margin: auto;
    }

    JS

    $(".toggle-password").click(function() {
       $(this).toggleClass("fa-eye fa-eye-slash");
       var input = $($(this).attr("toggle"));
       if (input.attr("type") == "password") {
         input.attr("type", "text");
       } else {
         input.attr("type", "password");
       }
    });

    Probarlo aquí: https://codepen.io/anon/pen/ZoMQZP

    • esta es la solución perfecta, muchas gracias
  5. 3

    1 minuto googleando me dio este resultado. Ver el DEMO!

    HTML

    <form>
        <label for="username">Username:</label>
        <input id="username" name="username" type="text" placeholder="Username" />
        <label for="password">Password:</label>
        <input id="password" name="password" type="password" placeholder="Password" />
        <input id="submit" name="submit" type="submit" value="Login" />
    </form>

    jQuery

    //----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
    $('input[type=password]').each(function () {
        var el = $(this),
            elPH = el.attr("placeholder");
        el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
    });
    $('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');
    
    //----- keep password field and dummy text field in sync
    $('input[type=password]').keyup(function () {
        var elText = $(this).val();
        $('.passText').val(elText);
    });
    $('.passText').keyup(function () {
        var elText = $(this).val();
        $('input[type=password]').val(elText);
    });
    
    //----- Toggle link functionality - turn on/off "offPage" class on fields
    $('a.togglePassText').click(function (e) {
        $('input[type=password], .passText').toggleClass("offPage");
        e.preventDefault(); //<-- prevent any default actions
    });

    CSS

    .offPage {
        position: absolute;
        bottom: 100%;
        right: 100%;
    }
    • qué frase se utiliza para la búsqueda?
    • tipo de entrada de contraseña visible
    • ¿Por qué en el Odin el nombre se obtiene de jQuery mumble revoltijo cuando la pregunta claramente las direcciones de llano y limpio JavaScript para una respuesta?
  6. 0
       <script>
           function seetext(x){
               x.type = "text";
           }
           function seeasterisk(x){
              x.type = "password";
           }
       </script>
      <body>
        <img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif"   alt="Smiley" width="32" height="32">
       <input id = "a" type = "password"/>
     </body>

    Probar este a ver si funciona

    • sólo funciona si se establece var a = document.getElementById('a'); global antes de
  7. 0

    una respuesta rápida no se ha probado en varios brosers,
    trabaja en gg de chrome /win

    -> En el evento focus -> mostrar/ocultar la contraseña

    <input type="password" name="password">

    script de jQuery

    //show on focus
    $('input[type="password"]').on('focusin', function(){
    
        $(this).attr('type', 'text');
    
    });
    //hide on focus Out
    $('input[type="password"]').on('focusout', function(){
    
        $(this).attr('type', 'password');
    
    });
  8. 0

    Intente Esto :

    En HTML y JS :

    JS:

    //Convert Password Field To Text On Hover.
      var passField = $('input[type=password]');
      $('.show-pass').hover(function() {
          passField.attr('type', 'text');
      }, function() {
        passField.attr('type', 'password');
      })

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- An Input PassWord Field With Eye Font-Awesome Class -->
    <input type="password" placeholder="Type Password">
          <i class="show-pass fa fa-eye fa-lg"></i>

  9. -1
    <html>
    <head>
    </head>
    <body>
    <script>
    function demo(){
        var d=document.getElementById('s1');
        var e=document.getElementById('show_f').value;
        var f=document.getElementById('show_f').type; 
    
        if(d.value=="show"){
            var f= document.getElementById('show_f').type="text";
            var g=document.getElementById('show_f').value=e;
            d.value="Hide";
    
        } else{
            var f= document.getElementById('show_f').type="password";
            var g=document.getElementById('show_f').value=e;
            d.value="show";
         }     
      }   
    </script>   
    
    <form method='post'>
    Password: <input type='password' name='pass_f' maxlength='30' id='show_f'><input type="button" onclick="demo()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;"><br><br>
    <input type='submit' name='sub' value='Submit Now'>
    
    </form>
    </body>
    </html>

Dejar respuesta

Please enter your comment!
Please enter your name here