Question

I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I’m using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/

When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):

The background text is not disappearing for saved passwords. Any help would be appreciative – thanks.

Answer 1

You could also take advantage of the new placeholder attribute. Read about it here.

No IE support, though.

Option 2 would be using Jquery. Since you’re already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.

This code would go inside the document ready function:

$(function() {
    // Handler for .ready() called.
});