3 formas para mostrar y ocultar contraseñas input password

3 formas para mostrar y ocultar contraseñas. En los formularios los campos de tipo password no muestran el contenido que tecleamos y lo oculta mediante asteriscos. Sin embargo, es una propiedad neta de este tipo de campo para evitar que alguien pueda ver nuestras contraseñas ingresadas.

Por lo tanto, algunas personas no logran acceder por algunos problemas que tengan a la hora de digitar su contraseña. A continuación detallaremos algunos problemas.

• Tener la tecla mayúscula activada.
• Si mi teclado se cambió de idioma de manera accidental y los caracteres especiales cambian (cuando usamos contraseñas fuertes)
• Digitamos muy rápido y confundimos de tecla.

Todos estos problemas podemos corregirlo si utilizamos esta pequeña implementación en un formulario de login PHP con jQuery.

¿Cuál es el Objetivo al usar este método?

EL objetivo común seria si tenemos un login con un input de tipo ‘password‘ y queremos dar al usuario la posibilidad de ver su contraseña mientras digita en dicha caja de texto.

¿Cuándo puede ser útil la utilización de esta opción?

• En el uso de formularios con uno o varios campos de tipo ‘password’ y queremos poder dar la opción mostrar la contraseña y mostrar asteriscos de manera simultánea al evento click.
• Es recomendable en formularios de tipo Registro de usuarios y los de Inicio de Sesión.
• Convierte a nuestros formularios en sistemas más completos.

3 FORMAS PARA MOSTRAR Y OCULTAR CONTRASEÑAS EN UN INPUT

A continuación daremos las tres formas para mostrar las contraseñas.

1) Primera forma usando JavaScript y un Botón

La implementación de esta opción es muy sencilla. Por lo tanto, ni siquiera envía datos, pero nos sirve de manera excepcional. Podemos ver que añadimos un scripts a la página, el de JavaScript y el que contendrá el código para mostrar el campo password.

Ahora vamos con el código para mostrar el valor del campo: Formulario HTML

<form method="POST">
<label>Contraseña</label>
<div class="form-row">
    <div class="col">
  <input class="form-control" type="password" name="password" id="password">
</div>
    <div class="col">
  <button class="btn btn-primary" type="button" onclick="mostrarContrasena()">Mostrar Contraseña</button>
</div>
  </div>
</form>

Codificación en el lenguaje JavaScript

Si observamos, este código contiene  una función llamada «mostrarContrasena» y esa función será incorporada en un botón con el evento «onclick«. Esto desencadena el cambio de tipo en el Input. Por lo tanto, va a pasar de tipo password a tipo text al presionar el botón.

<script>
  function mostrarContrasena(){
      var tipo = document.getElementById("password");
      if(tipo.type == "password"){
          tipo.type = "text";
      }else{
          tipo.type = "password";
      }
  }
</script>

2) Segunda forma usando jQuery y CheckBox

Básicamente lo que hacemos es añadir un evento click al campo checkbox. Cuando se hace click sobre el checkbox este comprueba su valor y sustituye el campo de manera simultánea. Por lo tanto, está en tipo password cuando no está seleccionando y text cuando está activado la casilla de verificación.

Librería externa

Su uso es obligatorio para el correcto funcionamiento del segundo ejemplo, ya que sin él no funciona el ejemplo

<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

Formulario HTML

Mostrando código HTML en el cual hay un formulario de login con un campo de tipo password y deseamos ver lo que digitamos.

<form action="" method="post" id="frmLogin">
  <div class="error-mensaje">
    
  </div>
  <div class="form-group">
    <label for="usuario">Usuario</label>
    <input name="usuario_nombre" type="text"  class="form-control">
  </div>
  <div class="form-group">
    <div class="form-row">
      <div class="col">
        <label for="password">Contraseña</label>
        <input name="usuario_password" type="password" value="" class="form-control" id="contrasena">
      </div>
      <div class="col">
        <label for="password"></label>
        <!-- checkbox que nos permite activar o desactivar la opcion -->
        <div style="margin-top:15px;">
          <input style="margin-left:20px;" type="checkbox" id="mostrar_contrasena" title="clic para mostrar contraseña"/>
          &nbsp;&nbsp;Mostrar Contraseña</div>
      </div>
    </div>
  </div>
  <div class="form-check">
    <input type="checkbox" name="remember" id="remember" class="form-check-input"/>
    <label for="remember-me">Recordarme</label>
  </div>
  <div class="form-group">
    <input type="submit" name="login" value="Iniciar Sesión"
          class="btn btn-primary">
  </div>
</form>

Código jQuery para visualizar la contraseña

<script>
$(document).ready(function () {
  $('#mostrar_contrasena').click(function () {
    if ($('#mostrar_contrasena').is(':checked')) {
      $('#contrasena').attr('type', 'text');
    } else {
      $('#contrasena').attr('type', 'password');
    }
  });
});
</script>

3) Tercera forma usando BootStrap

Librerías externas

Estas librerías son fundamentales para el correcto funcionamiento de este ejemplo.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Mostrando el código JavaScript

Aplicaremos iconos de la Librerías BootStrap para manejar la estética de nuestros formularios a lo más alto en diseño web.

<script type="text/javascript">
function mostrarPassword(){
		var cambio = document.getElementById("txtPassword");
		if(cambio.type == "password"){
			cambio.type = "text";
			$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
		}else{
			cambio.type = "password";
			$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
		}
	} 
	
	$(document).ready(function () {
	//CheckBox mostrar contraseña
	$('#ShowPassword').click(function () {
		$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
	});
});
</script>

Formulario HTML5

En este formulario tenemos dos ejemplos simultáneos:

Uno dando click en un botón y el otro activando la casilla.

<form id="form1">
<div class="container">
    <div class="row">
  <div class="col-md-6">
        <p>Click en el ojo para mostrar / ocultar</p>
        <label>Ingrese Contraseña</label>
        <div class="input-group">
      <input ID="txtPassword" type="Password" Class="form-control">
      <div class="input-group-append">
            <button id="show_password" class="btn btn-primary" type="button" onclick="mostrarPassword()"> <span class="fa fa-eye-slash icon"></span> </button>
          </div>
    </div>
      </div>
  <div class="col-md-6">
        <p>Verificar para mostrar / ocultar con chekbox</p>
        <label>Ingrese Contraseña</label>
        <div class="input-group">
      <input ID="Password" type="Password" Class="form-control">
      <div class="input-group-append"> <span class="input-group-text">
        <input ID="ShowPassword" type="checkbox" />
        </span> </div>
    </div>
      </div>
</div>
  </div>
</form>

CONCLUSIÓN

La usabilidad de este método es muy recomendable. Sin embargo, nuestro sistema tiene que regirse bajo los últimos estándares web y recuerden que esos estándares contemplan que nuestros trabajan deben ser aptos para todo tipo de personas (personas con habilidades diferentes).

El uso de los atributos title y alt en las etiquetas IMG, están regidas bajo ese estándar. Por lo tanto, la visualización de contraseñas también da facilidades para estas personas.

Recordemos que las grandes compañías como GOOGLE y otras empresas líderes en mundo brindan esta posibilidad.

DESCARGA

Les dejare un archivo comprimido con todos los ejemplos funcionando para que puedan implementarlo en sus proyectos web.