vanilla-js-show-hide-password

Toggle HTML password input semantically

Usage no npm install needed!

<script type="module">
  import vanillaJsShowHidePassword from 'https://cdn.skypack.dev/vanilla-js-show-hide-password';
</script>

README

Toggle HTML Password Input Semantically

This is a very small library for creating password toggle buttons semantically.

Todo

NPM & Yarn Package

Usage

It's simple.

Download the JS file
Import into your markup

<script src="toggle-password.js"></script>

Write your markup:

<!-- define you input password -->
<input type="password" id="password">

<!-- create the button toggle -->
<button data-toggle="password" data-target="#password">Toggle</button>

Done

This library will scan all elements in the document that have the data-toggle="password" attribute. So you don't need to initiate anything.

Note: You can add the data-class-active attribute to define a class when the button is active (or input in" text "mode)

For example:

<button data-toggle="password" data-target="#password" data-class-active="is-active">Toggle</button>

<style>
  .is-active {
    background-color: red;
  }
</style>

Demo

License

MIT License