last-typed-letter-password/src/index.js

Show the last typed letter in the password field with input type as password.

export const lastTyped = (idOfTheInput) => {
  const iFieldCopy = document.getElementById(idOfTheInput);
  let flag = "";
  const mask = (cc, num = 4, mask = "•") => {
    return `${cc}`.slice(-num).padStart(`${cc}`.length, mask);
  };

  iFieldCopy.addEventListener("input", () => {
    iFieldCopy.type = "text";
    if (flag.length < iFieldCopy.value.length) {
      if (!iFieldCopy.value.includes("•")) {
        flag = iFieldCopy.value;
      } else {
        flag = flag + iFieldCopy.value.charAt(iFieldCopy.value.length - 1);
      }
    } else if (iFieldCopy.value.length === 1 || iFieldCopy.value.length === 0) {
      flag = iFieldCopy.value;
    } else {
      flag = flag.substring(0, flag.length - 1);
    }
    const maskedVal = mask(iFieldCopy.value, 1);
    iFieldCopy.value = maskedVal;
    processChanges();
  });

  function debounce(func, timeout = 1000) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, args);
      }, timeout);
    };
  }

  const processChanges = debounce(() => {
    saveInput();
  });

  function saveInput() {
    iFieldCopy.value = flag;
    iFieldCopy.type = "password";
    console.log("Saving data ", iFieldCopy.value);
  }
};