Skip to content

A lightweight and modern utility to mask input fields with password-like characters. This library is specifically designed to prevent password managers from automatically saving values, making it ideal for sensitive data handling. It also provides a method to retrieve the original value of the input. Fully compatible with JavaScript and TypeScript.

License

Notifications You must be signed in to change notification settings

krozamdev/masked-password

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@krozamdev/masked-password

A lightweight and modern utility to mask input fields with password-like characters. This package is designed to prevent automatic storage in password managers while allowing easy retrieval of the original value. Perfect for cases where sensitive data needs to be handled in a custom way.


Features

  • 🔒 Masks input fields in real-time using customizable characters (e.g., * or •).
  • 📜 Allows retrieval of the original value without exposing it in the UI.
  • ✅ Works seamlessly with JavaScript and TypeScript.
  • 🚀 Lightweight and easy to integrate with any frontend framework.
  • 💡 Prevents password managers from saving sensitive input values.

Installation

  • npm

    npm install @krozamdev/masked-password
  • yarn

    yarn add @krozamdev/masked-password

Usage

Basic Example ESModule

By default, the masking character is *, and the original value can be retrieved using the provided method.

import { applyMaskedInput } from '@krozamdev/masked-password';

const inputElement = document.getElementById("passwordInput") as HTMLInputElement;
const maskedInput = applyMaskedInput(inputElement);

console.log(maskedInput.getOriginalValue()); // Original value of input

Custom Mask Character

You can also provide a custom mask character, such as , by passing it as a configuration option.

import { applyMaskedInput } from '@krozamdev/masked-password';

const inputElement = document.getElementById("passwordInput") as HTMLInputElement;
const maskedInput = applyMaskedInput(inputElement, { character: "•" });

console.log(maskedInput.getOriginalValue()); // Original value of input

HTML Example

<input type="text" id="passwordInput" />
<script type="module">
  import { applyMaskedInput } from '@krozamdev/masked-password';

  const inputElement = document.getElementById('passwordInput');
  const maskedInput = applyMaskedInput(inputElement, { character: '•' });

  // To get the original value
  console.log(maskedInput.getOriginalValue());
</script>

CommonJS Example

In CommonJS, you can use require to import the module.

Default Mask (*):

const { applyMaskedInput } = require('@krozamdev/masked-password');

const inputElement = document.getElementById('passwordInput');
const maskedInput = applyMaskedInput(inputElement);

console.log(maskedInput.getOriginalValue()); // Original value of input

Custom Mask ():

const { applyMaskedInput } = require('@krozamdev/masked-password');

const inputElement = document.getElementById('passwordInput');
const maskedInput = applyMaskedInput(inputElement, { character: '•' });

console.log(maskedInput.getOriginalValue()); // Original value of input

HTML Example

<input type="text" id="passwordInput" />
<script type="module">
  const { applyMaskedInput } = require('@krozamdev/masked-password');

  const inputElement = document.getElementById('passwordInput');
  const maskedInput = applyMaskedInput(inputElement, { character: '•' });

  // To get the original value
  console.log(maskedInput.getOriginalValue());
</script>

Browser Support

omit the version completely to get the latest one you should NOT use this in production

<script src="https://cdn.jsdelivr.net/npm/@krozamdev/masked-password/dist/index.umd.min.js"></script>
<input type="text" id="passwordInput" />
<button id="btn">Show Log</button>
<script>
  const inputElement = document.getElementById("passwordInput");
  const maskedInput = MaskedPassword.applyMaskedInput(inputElement, {
    character: "•",
  });

  document.getElementById("btn").addEventListener("click", function () {
    console.log(maskedInput.getOriginalValue());
  });
</script>

Options

character (optional): The character to use for masking the input field. Default is *.

Methods

getOriginalValue(): Returns the original unmasked value of the input.

License

MIT

About

A lightweight and modern utility to mask input fields with password-like characters. This library is specifically designed to prevent password managers from automatically saving values, making it ideal for sensitive data handling. It also provides a method to retrieve the original value of the input. Fully compatible with JavaScript and TypeScript.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published