vanilla-js-show-hide-password

1.0.0 • Public • Published

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.

  1. Download the JS file
  2. Import into your markup
<script src="toggle-password.js"></script>
  1. 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>
  1. 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

Hit Me

License

MIT License

Readme

Keywords

Package Sidebar

Install

npm i vanilla-js-show-hide-password

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

2.23 kB

Total Files

3

Last publish

Collaborators

  • nauvalazhar