Show/Hide Password Text In A Form – X-Ray.js

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>