skip to Main Content

`in my work I am asked to hide the content of the input as if it were a password and I don’t know what to do.
I tried to replace the last letters that came with a * and it worked but if I need to delete for example the penultimate letter it erases the last one. is there a better solution?

const deleteLastLetter = (unprotectedEmail, email, InitialEmail) => {
let unprotectedEmailDeleteLastLetter = unprotectedEmail.slice(
0,
InitialEmail.length - unprotectedEmail.length
);
let emailViewDeleteLastLetter = email.slice(
0,
InitialEmail.length - unprotectedEmail.length
);
return {
unprotectedEmailDeleteLastLetter,
emailViewDeleteLastLetter,
};
};

const onChangeEmail = (e, emailView) => {
//trim() removes the spaces at the beginning and end of the text
const InitialEmail = e.target.value.toLowerCase().trim();

//ask if the emailView variable is set to false (this shows the value of the text in *)
if (!emailView) {
if (InitialEmail.length < unprotectedEmail.length) {
// if a letter is deleted in the initial text calls the function deleteLastLetter
const { unprotectedEmailDeleteLastLetter, emailViewDeleteLastLetter } =
    deleteLastLetter(unprotectedEmail, email, InitialEmail);
// the value is assigned to the variables
setEmail(emailViewDeleteLastLetter);
setUnprotectedEmail(unprotectedEmailDeleteLastLetter);
} else {
// if no letter is deleted, all letters are replaced by *.

setEmail("*".repeat(InitialEmail.length));
// the * character is removed from InitialEmail
const lastLetter = InitialEmail.replace(/*/g, "");
// the actual value is stored in a variable
setUnprotectedEmail(unprotectedEmail + lastLetter);
}
}


 //ask if emailView variable is set to true (this shows the actual text to the user)
    if (emailView) {
    if (InitialEmail.length < unprotectedEmail.length) {
      // if a letter is deleted in the initial text calls the function deleteLastLetter
    const { unprotectedEmailDeleteLastLetter } = deleteLastLetter(
    unprotectedEmail,
    email,
    InitialEmail
    );
    // the value is assigned to the variables
    setEmail(unprotectedEmailDeleteLastLetter);
    setUnprotectedEmail(unprotectedEmailDeleteLastLetter);
    } else {
    setEmail(InitialEmail);
    setUnprotectedEmail(InitialEmail);
    }
    }
    };

`

2

Answers


  1. HTML does this for you:

    <input type="password" />

    Login or Signup to reply.
  2. Edit that in your HTML file:

    FROM:
    <input type="text"/>
    TO:
    <input type="password"/>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search