Mostrar/Ocultar texto de contraseña en un formulario-X-Ray. js
| Autor: | cferdinandi |
|---|---|
| Views Total: | 1,547 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 21, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
X-Ray. js es un plugin de JavaScript vainilla que permite mostrar/ocultar cadenas de contraseña en su campo de contraseña cuando sea necesario.
Funcionamiento
Importe el JavaScript y la hoja de estilos de X-Ray en el archivo HTML.
<link rel="stylesheet" href="dist/css/x-ray.css"> <script src="dist/js/x-ray.js"></script>
Inicializar el plugin y ya está listo para ir.
xray.init();
Mostrar/ocultar su contraseña con un botón de alternancia.
<form> <label>Username</label> <input type="text"> <label>Password</label> <input id="pw1" type="password"> <button class="x-ray" data-x-ray="#pw1" data-default="show"> <span class="x-ray-show" data-x-ray-show>Show Password</span> <span class="x-ray-hide" data-x-ray-hide>Hide Password</span> </button> </form>
Mostrar/ocultar su contraseña con una casilla de verificación.
<form> <label>Username</label> <input type="text"> <label>Password</label> <input id="pw2" type="password"> <label class="x-ray"> <input type="checkbox" data-x-ray="#pw2" data-default="show" checked> Show password </label> </form>
