Masking Sensitive Input Fields with masked-password

Preview:

Description:

JavaScript developers face challenges when handling sensitive user input. The masked-password library provides a simple solution for protecting confidential data during web interactions.

This lightweight JavaScript allows you to mask values your user typed in input fields while maintaining data integrity and user experience. It also prevents automatic storage by password managers and allows convenient retrieval of the original value. This can be useful for applications that handle sensitive information beyond just passwords, such as credit card details, security codes, or personal identification numbers, where you want to prevent the browser’s built-in password saving mechanisms.

How to use it:

1. Install masked-password via package managers.

# Yarn
$ yarn add @krozamdev/masked-password
# NPM
$ npm install @krozamdev/masked-password

2. Import applyMaskedInput into your JavaScript file:

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

3. For browser usage, include the main script on your HTML page.

<script src="/dist/index.umd.min.js"></script>

4. Apply the masking function to your input field:

<input type="text" id="example" />

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

5. You can choose a different masking character, such as ‘•’, ‘#’, ‘$’, etc:

const maskedInput = applyMaskedInput(inputElement,{
      character: '#'
});

6. Access the unmasked input value using the getOriginalValue method:

maskedInput.getOriginalValue()

7. Destroy the instance.

maskedInput.destroy()
// removes all registered event listeners from the input element without checking any conditions
maskedInput.purgeDestroy()

8. re-register event listeners on the input element.

maskedInput.addEvent();

Changelog:

v1.1.5 (02/24/2025)

• Update

v1.1.3 (02/22/2025)

• Update

v1.0.2 (01/26/2025)

• Update

v1.0.1 (01/26/2025)

• Update

v1.0.0 (01/25/2025)

• Added New methods and logic to enhance the core implementation.
• Updated configuration interface for better flexibility and usability.
• Changed Default masking character changed from * to •.
• Refactored the configuration interface implementation for improved code readability and efficiency.

v0.3.0 (01/24/2025)

• Added destroy method: Introduced a method to remove registered event listeners from the input element, restore the original value, and deactivate masking.
• Added addEvent method: Introduced a method to re-register event listeners on the input element, making it easier to re-enable masking after being destroyed.
• Changed: Automatically activates masking (addEvent) during initialization.