0

Necesito ayuda con un input type=password, en el edge me sale el ojito para poder ver que escribo pero en chrome y mozilla no me sale el ojo, y no se si sea algun webkit o tengo que hacer un script para que me cambie el tipo de input.

1

1 respuesta 1

1

No todos los navegadores incluyen ese webkit, en este caso, puedes implementarlo por ti mismo. Te dejo uno de ejemplo

$(document).ready(function() {
    $("#show_hide_password a").on('click', function(event) {
        event.preventDefault();
        if($('#show_hide_password input').attr("type") == "text"){
            $('#show_hide_password input').attr('type', 'password');
            $('#show_hide_password i').addClass( "fa-eye-slash" );
            $('#show_hide_password i').removeClass( "fa-eye" );
        }else if($('#show_hide_password input').attr("type") == "password"){
            $('#show_hide_password input').attr('type', 'text');
            $('#show_hide_password i').removeClass( "fa-eye-slash" );
            $('#show_hide_password i').addClass( "fa-eye" );
        }
    });
});
body{
  padding:100px 0;
  background-color:#efefef
}
a, a:hover{
  color:#333
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/b9bdbd120a.js"></script>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">
      <form>
  <div class="form-group">
    <label>Clave</label>
    <div class="input-group" id="show_hide_password">
      <input class="form-control" type="password">
      <div class="input-group-addon">
        <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</form>
    </div>
  </div>
</div>

1
  • Gracias, entonces tendré que hacer mi propio campo, y gracias también por el ejemplo.
    – tryPlease
    Commented el 28 jun. 2022 a las 14:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.