Custom glyphs inside password input [duplicate] - html

Question

Suppose I have a textbox and I want that when the user types inside it then each character will be converted to a password symbol after 1 sec by jQuery.
The same effect that we see on modern smart-phones when we type into password textboxes.
Does anyone have any suggestions? I know how to capture the key press and get the character user typed.
<input type="text" id="username" name="username" />
<script type="text/javascript">
$("#username").keypress(function(event){
// Get the keypress value
// ...?
var c = String.fromCharCode(e.which);
}
});
</script>

Answer 1

You can start with that: http://jsfiddle.net/89CF8/7/
But it works only if you type correctly.
You should save the value in another variable (I use letters array in the example), because standard input only allows you to change it's value for asterisks, losing all that user has been typed.
Issue #1. You should add checking for non-symbols. For example, Del key will add bad symbol to letters array.
Issue #2. You should add checking for backspace and use splice to remove elements.
Issue #3. If user deletes symbol from the middle of the text, it's very hard to synchronize new value with your variable, which stores the initial value.
After all, I think that it isn't good idea, but maybe my code will help you to find better solution.

Answer 2

You dont actually need to handle key press. Use 1sec timeout loop, and replace all characters in textbox with stars. And dont forget to store characters in a varaible.
Something like below would help you, but you have to spend some time to fix bugs.
http://jsfiddle.net/ymutlu/8BXDu/2/

Answer 3

custom mask password by javascript
custom mask password
<style>
.mask {
position: relative;
overflow: hidden;
}
input#pass {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
</style>
<script>
var txt = document.getElementById("txtMask");
var hdn = document.getElementById("pass");
hdn.addEventListener("keyup", function(evt){
txt.value = '';
for(let i=0; i<hdn.value.length;i++)
{
txt.value +='#';
}
});
</script>
<div class="mask">
<input type="text" id="txtMask" autocomplete="false">
<input type="text" id="pass">
</div>