Author: | cferdinandi |
---|---|
Views Total: | 365 views |
Official Page: | Go to website |
Last Update: | April 21, 2017 |
License: | MIT |
Preview:

Description:
X-Ray.js is a vanilla JavaScript plugin which allows to show/hide password strings in your password field when needed.
How to use it:
Import the X-Ray’s JavaScript and Stylesheet into the html file.
<link rel="stylesheet" href="dist/css/x-ray.css"> <script src="dist/js/x-ray.js"></script>
Initialize the plugin and you’re ready to go.
xray.init();
Show/hide your password with a toggle button.
<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>
Show/hide your password with a checkbox.
<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>