I am trying to create a password input field using type 'text' instead of 'password.'
<input type="text" v-model="form.password" @input="test" />
<input type="hidden" v-model="form.hiddenPassword" />
As part of my approach, I have implemented some methods. When I enter 'a', it gets replaced by * and 'a' goes into hiddenPassword.
test(e) {
if (e.inputType === "deleteContentBackward") {
this.form.hiddenPassword = this.form.hiddenPassword.substr(
0,
this.form.hiddenPassword.length - 1
);
this.form.password = this.masking(this.form.hiddenPassword);
console.log(this.form.hiddenPassword);
} else {
this.form.hiddenPassword =
this.form.hiddenPassword +
this.form.password.substr(this.form.password.length - 1);
this.form.password = this.masking(this.form.hiddenPassword);
}
},
masking(input) {
const lng = input.length;
let maskingResult = "";
maskingResult += "*".repeat(lng);
return maskingResult;
}
While this method works effectively for regular usage, it has a specific issue when attempting to delete the entire password in the input field using Ctrl+A and Backspace, as it only deletes one character at a time.
I am seeking guidance on how to detect Ctrl+A or select a range with the mouse to delete the entire password. Any solutions or suggestions would be greatly appreciated. Thank you for taking the time to read this.