Skip to main content

someone knows how to hide the content of an input without being of type password? that is of the email type

`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);
    }
    }
    };

`

Via Active questions tagged javascript - Stack Overflow https://ift.tt/wfRmnUr

Comments