I was given a fascinating challenge to produce a simple HTML, JavaScript interface that would react and respond in the same way that the iPhone password text box reacts. That is, when you punch a key you temporarily see the value of the entered text, after some short display the text is replaced by an asterix. So this is what I came up with for the basic html, the solution relies on a hidden field that actually stores the value of the password field while the actual text box :

<p>
    <input type="text" id="field" value="" size="10" onkeypress="UserTyping(event)" 
onkeydown="CheckForDeletes(event)"> </p> <p> <input type="text" id="hiddenfield" value="" size="10"> </p>
<script type="text/javascript">
 
    function UserTyping(e) {
 
        var text = document.getElementById('hiddenfield').value;
        var stars = document.getElementById('hiddenfield').value.length;
        unicode = eval(unicode);
        var unicode = e.keyCode ? e.keyCode : e.charCode;
 
        //Ensure only valid text is entered
        if ((unicode >= 65 && unicode <= 90)
            || (unicode >= 97 && unicode <= 122)
                || (unicode >= 48 && unicode <= 57)) {
            text = text + String.fromCharCode(unicode);
            stars += 1;
        }
        else {
            stars -= 1;
        }
 
        //Update our hidden field with the real data
        document.getElementById('hiddenfield').value = text;
 
        //Update the visible field with 
        document.getElementById('field').value = showAsterix(stars);
 
        //Only show the last character entered for a limited time
        //then show all asterix'
        setTimeout(function () { ReplaceAllAsterix() }, 500);
    }
 
    function showAsterix(n) {
        var stars = '';
 
        for (var i = 1; i < n; i++) {
            stars += '*';
        }
 
        return stars;
    }
 
    function ReplaceAllAsterix() {
        if (document.getElementById('field').value.length > 0) {
            var stars = generateStars(document.getElementById('field').value.length + 1);
            document.getElementById('field').value = stars;
        }
    }
  
 
    function CheckForDeletes(e) {
        var unicode = e.keyCode ? e.keyCode : e.charCode;
  
        if (unicode == 8 ||  unicode == 46) {
            document.getElementById('hiddenfield').value = "";
            document.getElementById('field').value = "";
        }
    }
</script>

 

The most obvious weakness here is that deleting the text removes the entire line, this was necessary as we cannot actually tell which characters is being deleted within the context of text box in a web browser. Please feel free to point me to better solutions in the comments I was hoping someone solved this problem properly in HTML5 and jQuery.