Solo estaba tratando de hacer un fragmento que permita al usuario ingresar su ssn pero también lo oculte con un asterisco (*). Seguí los números de enmascaramiento de SSN a un carácter especial (*) en la entrada en la respuesta de teclado e intenté agregar un guión (-) entre la entrada para formatear. Pero cuando presiono la tecla de retroceso, no se elimina el carácter.
<!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>¿Cómo puedo lograr eso?