I've seen this question come up a couple of times and so I thought I'd take a shot at it.

"How do I change the text in a password field from readable text to the password dots in real time?"

Of course the first answer is to use jquery, and that would be a good solution. However, where is the fun in doing that? Not to mention all the overhead of loading in a huge JS library to perform one simple task.

So enter the raw solution, no libraries just JavaScript, naked and beautiful. Normally, this would be an even easier solution, all you have to do is switch the "type" property of the text box from "text" to "password" on the fly and you're done, however that won't work in IE thanks to a clever decision in Seattle to make the "type" property read only once an element has been added to the DOM. So what we have to do is actually remove the element and create a replacement, and then swap in the replacement on the go.

HTML:

<input type="text" name="inpPass" id="inpPass" value="Password"/>

JavaScript:

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'password');
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
        newInp.focus();
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'text');
        newInp.value = "Password";
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
    }
}

If you read through the above code you can see that a new element is created, it borrows the event handlers from its predecessor, we set its name and ID, and we place it on the form right after we blow up the original.