Skip to content

Commit 190942a

Browse files
krozamdevkrozamdev
authored
Feature/no ref/add new method destroy and add event listener (#9)
* feat: add interface masking-password * feat: add new method destroy and add event listener * feat: update sample code test multiple instance masking-password * chore: update minor version 0.2.3 -> 0.3.0
1 parent f651eca commit 190942a

4 files changed

Lines changed: 90 additions & 12 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@krozamdev/masked-password",
3-
"version": "0.2.3",
3+
"version": "0.3.0",
44
"description": "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.",
55
"keywords": [
66
"input masking",

‎samples/index.html‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,65 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Sample</title>
7-
<script src="../dist/index.umd.min.js"></script>
6+
<title>@krozamdev/masked-password</title>
7+
<script src="../dist/index.umd.min.js"></script> <!-- build version -->
88
</head>
99
<body>
1010
<input type="text" id="passwordInput" />
11-
<button id="btn">Show Log</button>
11+
<button id="btn_toggle" style="font-size: 25px;">👁</button>
12+
<button id="btn">Show Original Value</button>
13+
<br>
14+
<h3>Original Value : </h3>
15+
<span id="original_value"></span>
16+
<br>
17+
<input type="text" id="passwordInput1" />
18+
<button id="btn_toggle1" style="font-size: 25px;">👁</button>
19+
<button id="btn1">Show Original Value</button>
20+
<h3>Original Value1 : </h3>
21+
<span id="original_value1"></span>
1222
<script>
23+
let show = false;
1324
const inputElement = document.getElementById("passwordInput");
25+
const btnToggle = document.getElementById("btn_toggle");
26+
btnToggle.style.textDecoration = "line-through";
27+
document.getElementById("btn").addEventListener("click", function () {
28+
document.getElementById("original_value").textContent = maskedInput.getOriginalValue();
29+
});
30+
btnToggle.addEventListener("click", function (e) {
31+
if (show) {
32+
btnToggle.style.textDecoration = "line-through";
33+
maskedInput.addEvent();
34+
}else{
35+
btnToggle.style.textDecoration = "none";
36+
maskedInput.destroy();
37+
}
38+
show = !show
39+
});
40+
41+
42+
let show1 = false;
43+
const inputElement1 = document.getElementById("passwordInput1");
1444
const maskedInput = MaskedPassword.applyMaskedInput(inputElement, {
1545
character: "•",
1646
});
47+
const maskedInput1 = MaskedPassword.applyMaskedInput(inputElement1, {
48+
character: "•",
49+
});
50+
const btnToggle1 = document.getElementById("btn_toggle1");
51+
btnToggle1.style.textDecoration = "line-through";
1752

18-
document.getElementById("btn").addEventListener("click", function () {
19-
console.log(maskedInput.getOriginalValue());
53+
document.getElementById("btn1").addEventListener("click", function () {
54+
document.getElementById("original_value1").textContent = maskedInput1.getOriginalValue();
55+
});
56+
btnToggle1.addEventListener("click", function (e) {
57+
if (show1) {
58+
btnToggle1.style.textDecoration = "line-through";
59+
maskedInput1.addEvent();
60+
}else{
61+
btnToggle1.style.textDecoration = "none";
62+
maskedInput1.destroy();
63+
}
64+
show1 = !show1
2065
});
2166
</script>
2267
</body>

‎src/index.ts‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { applyMaskedInputInterface } from "./interfaces/main";
2+
13
export const applyMaskedInput = (
24
inputElement: HTMLInputElement,
35
config: { character?: string } = {}
4-
): { getOriginalValue: () => string } => {
6+
): applyMaskedInputInterface => {
57
inputElement.setAttribute("autocomplete", "off");
68
let originalValue: string = "";
79
const character: string = config?.character ?? "*";
@@ -19,7 +21,7 @@ export const applyMaskedInput = (
1921
};
2022

2123
// handle pasting text
22-
inputElement.addEventListener("paste", (e) => {
24+
const handlePaste = (e: ClipboardEvent) => {
2325
// get the pasted text
2426
const pastedText = (e as ClipboardEvent).clipboardData?.getData("text") ?? "";
2527
const caretPosition = getCaretPosition(inputElement);
@@ -43,9 +45,9 @@ export const applyMaskedInput = (
4345

4446
// move caret to end of pasted text
4547
setCaretPosition(inputElement, caretPosition + pastedText.length);
46-
});
48+
};
4749

48-
inputElement.addEventListener("beforeinput", (e) => {
50+
const handleBeforeInput = (e: InputEvent) => {
4951
const caretPosition: number = getCaretPosition(inputElement);
5052
const selectionLength: number = getSelectionLength(inputElement);
5153
const inputType: string = (e as InputEvent).inputType;
@@ -117,9 +119,35 @@ export const applyMaskedInput = (
117119

118120
// restore caret position
119121
setCaretPosition(inputElement, newCaretPosition);
120-
});
122+
};
123+
124+
// add events
125+
inputElement.addEventListener("paste", handlePaste);
126+
inputElement.addEventListener("beforeinput", handleBeforeInput);
127+
128+
let activeEvent = true;
121129

122130
return {
123-
getOriginalValue: (): string => originalValue,
131+
getOriginalValue: (): string => activeEvent ? originalValue : inputElement.value,
132+
destroy: () => { // destroy events
133+
if (!activeEvent) {
134+
return;
135+
}
136+
inputElement.removeEventListener("paste", handlePaste);
137+
inputElement.removeEventListener("beforeinput", handleBeforeInput);
138+
inputElement.value = originalValue;
139+
activeEvent = false;
140+
},
141+
addEvent : () => {
142+
if (activeEvent) { // handle duplicate events
143+
return;
144+
}
145+
activeEvent = true;
146+
inputElement.addEventListener("paste", handlePaste);
147+
inputElement.addEventListener("beforeinput", handleBeforeInput);
148+
originalValue = inputElement.value;
149+
inputElement.value = character.repeat(originalValue.length);
150+
setCaretPosition(inputElement, originalValue.length);
151+
}
124152
};
125153
};

‎src/interfaces/main.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface applyMaskedInputInterface {
2+
getOriginalValue: () => string;
3+
destroy: () => void;
4+
addEvent : () => void;
5+
}

0 commit comments

Comments
 (0)