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.