Question

Im trying to figure out how to mask text in a text input as though its a password field, only its not.
This is for a personal experiment and I unserdtand it may sound strange but its something I’d like to try, Ive used the replace method to change characters to asterisks only when I alert the value, it alerts * when the asterisk should only be a mask and the alert should show the true value, does this make sense and if so has anybody an idea of how to do this?

Thanks

Answer 1

The “obvious” solution (besides using a password field in the first place) is to have two fields, the display field with the mask and a hidden field with the real value:

<input type="text" id="maskField1">
<input type="hidden" id="hiddenField1" name="field1">

<script>
$("#maskField1").keyup(function(e) {
    var newText = this.value.replace(/\*/g,"");
    $("#hiddenField1")[0].value += newText;
    this.value = this.value.replace(/[^*]/g,"*");
});
</script>

Unfortunately, as you can see with this demo: http://jsfiddle.net/PrHuE/ it only works as long as you add more characters to the end of the current text. A real solution is much more complicated than this because you have to allow for the user adding text in the middle of the string, or selecting multiple characters and then overtyping or explictly deleting, or pasting from clipboard, etc. I’m trapping keyup above, but user could paste with the mouse, so…

Also if the user actually types some asterisks that confuses the above code.

You can see I’m just taking any non-asterisk characters in the displayed mask field and appending them to the end of the hidden field before changing non-asterisks to asterisks. You could instead find the position within the string of those non asterisk characters and insert them to the same position in the hidden field. That wouldn’t be too hard. But figuring out which characters have been deleted (or replaced) would be much harder, way beyond what I have time for here.

Solution 2: Create your own font where every character looks like an asterisk, then embed the font in your webpage and use it in the input field. For browsers that actually allow this it would be a no-code solution. For browsers that don’t allow it obviously it wouldn’t work at all.