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

Category: Form , Javascript | April 21, 2017
Views Total:365 views
Official Page:Go to website
Last Update:April 21, 2017


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.


Show/hide your password with a toggle button.

  <input type="text">
  <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>

Show/hide your password with a checkbox.

  <input type="text">
  <input id="pw2" type="password">
  <label class="x-ray">
    <input type="checkbox" data-x-ray="#pw2" data-default="show" checked>
    Show password

You Might Be Interested In:

Leave a Reply