`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
HTML does this for you:
<input type="password" />
Edit that in your HTML file: