js-toggle-password
v1.0.5
Published
Enhances the password input fields on your web page by adding a toggle button to switch between masked and plain text passwords.
Downloads
10
Maintainers
Keywords
Readme
JS Toggle Password
This repo enhances the password input fields on your web page by adding a toggle button to switch between masked and plain text passwords.
Features
- Easily toggle password visibility with a single click.
- Customize the appearance and behavior of the toggle button.
- Support for using custom SVG icons for the toggle button.
Demo
Usage
HTML
First, input type password have a parent div
element.
<html>
<head></head>
<body>
<form>
<label>Password</label>
<div>
<input type="password" name="password" style="width: 100%" />
</div>
</form>
<script type="module">
import TogglePassword from "./src/index.js";
const togglePassword = new TogglePassword();
togglePassword.create();
</script>
</body>
</html>
Configuration
You can modify toggle password svg styles, postion and svg icons using below property.
| Property | Name | Type |
|------------| --------------- | ---------------------------------------- |
| styles | width
| Number - css in pixels |
| | height
| Number - css in pixels |
| | color
| String - hex color code |
| | | |
| position | right
| Number - css in pixels |
| | top
| Number - css in percentage |
| | | |
| icons | visibleSvg
| String - svg code |
| | inVisibleSvg
| String - svg code |
const togglePassword = new TogglePassword({
styles: {
width: 24, // default
height: 24, // default
color: '#000000', // default
},
position: {
right: 8, // default
top: 50, // default
},
icons: {
visibleSvg: 'svgcode',
inVisibleSvg: 'svgcode'
}
});
togglePassword.create();