Dynamic replacement of text input with asterisks

I saw a featured on fidelity.com and I was thinking about trying to do something similar on our checkout page for the credit card field. I believe it is javascript but I have no idea how to do it. If you go to fidelity.com, on the top left you'll see the login section. Type something in the Customer ID/SSN field. Then when you hit tab or click on to the PIN field, the customer ID you just typed gets turned into a bunch of asterisks. Any idea how to do that? Note that you do not need a fidelity account to see it actually work. Thanks,

Bill

 

would you want all the digits/characters entered to be turned to asterisks' or just the first few like on the page you mentioned. If so how many would you want made into asterisks'.

 

here is pretty much the same as the website you indicated, all but the last three characters is masked and the actual value is stored within a hidden field so it can be accessed by the server-side processing script:

<script type="text/javascript">
window.onload = function() {
    var custId = document.getElementById("cID");
        custId.onblur = function() {
            document.getElementById("actualcID").value = custId.value;
            var len = custId.value.length
            custId.value = "";
            if(len > 3)
                for(i=0; i<(len-3); i++)
                    custId.value += "*";
                custId.value += document.getElementById("actualcID").value.substr(len-3, 3);
        }
}
</script>
<form id="login" method="post" action="login.php">
<input type="text" id="cID" />
<input type="password" id="pin" />
<input type="hidden" id="actualcID" />
<input type="submit" />
</form>

Code (markup):