I did it by setting the input field as "text", and catching and manipulating the input keys
first activate a function to catch keys
yourInputElement.addEventListener('keydown', onInputPassword);
the onInputPassword function is like this: (assuming that you have the "password" variable defined somewhere)
onInputPassword( event ) {
let key = event.key;
event.preventDefault(); // this is to prevent the key to reach the input field
if( key == "Enter" ) {
// here you put a call to the function that will do something with the password
}
else if( key == "Backspace" ) {
if( password ) {
// remove the last character if any
yourInputElement.value = yourInputElement.value.slice(0, -1);
password = password.slice(0, -1);
}
}
else if( (key >= '0' && key <= '9') || (key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z') ) {
// show a fake '*' on input field and store the real password
yourInputElement.value = yourInputElement.value + "*";
password += key;
}
}
so all alphanumeric keys will be added to the password, the 'backspace' key will erase one character, the 'enter' key will terminate, and any other keys will be ignored
don't forget to call removeEventListener('keydown', onInputPassword) somewhere at the end