I was just trying to make a snippet that allows user to enter their ssn but also hides it with asterisk (*). I followed SSN masking numbers to a special character (*) in input on keyup answer and i tried to add hyphen (-) between input for formatting. But when I am pressing backspace, its not deleting the character.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<input id="password" type="text" onkeyup="changeValue(event)" maxlength="11"/>
<input id="hiddenPass" type="hidden" />
</div>
<script>
var arr = [];
function changeValue(event) {
var element = document.getElementById("password");
var hiddenElement = document.getElementById("hiddenPass");
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
var isTrue = /[0-9]/.test(element.value);
// if [0-9] (for number)
if (isTrue || event.keyCode == 8) {
// for deletion
if (event.keyCode == 8) {
arr.splice(endPos, 1);
setStar(arr);
} else {
var val = element.value;
var obj = { key: val[startPos - 1], value: "*" };
// perticular position insertion
arr.splice(startPos - 1, endPos - startPos, obj);
setStar(arr);
}
} else {
// for space controlling
element.value = element.value.trim();
return;
}
}
// star setting
function setStar(arr) {
var element = document.getElementById("password");
var hiddenElement = document.getElementById("hiddenPass");
var starText = "";
var originalText = "";
for (var i = 0; i < arr.length; i++) {
if (i === 3 || i === 5) {
starText += "-"
}
starText += arr[i].value
originalText += arr[i].key;
}
element.value = starText;
hiddenElement.value = originalText;
console.log("HiddenElement", hiddenElement.value);
}
</script>
</body>
</html>how can I achieve that?