How would I achieve very simple text box hints that work with password fields in CSS / HTML?

Question

I would like most of my text boxes in my web application to display a hint to minimise clutter on the screen.

I have come across many solutions but all of them seem so complicated for what I want. It may be worth pointing out now that my Javascript knowledge is quite poor.

All I need is a simple script that will allow me to have text box hints (with a CSS style so I can make it greyed out and italic) and that will work with a password field.

I did have a script but it only allowed me to have one password field per page and it wasn't very easy to use everywhere.

Thank you, your help is greatly appreciated.

EDIT: This also needs to be compatible with IE6 unfortunately.

Answer 1

The safest way would probably be to create two password boxes for instance and the one with text in you do as following:

<input style="color:#B0AEAE;width:167px;display:none;" id="password_text" type="text" value="Password" />
<input type="password" id="password_password" name="password" style="width:167px" maxlength="20"/>

Then you first hide the "normal" password input field with (I use) jquery and display the hidden password field and you can on click go back to the other one like this:

$(document).ready(function() {

$('#password_text').show();
$('#password_password').hide();

$('#password_text').focus(function() {
    $('#password_text').hide();
    $('#password_password').show();
    $('#password_password').focus();
});
    $('#password_password').blur(function() {
    var password = $(this).val();
    if(password == '') {
        $('#password_password').hide(); 
        $('#password_text').show();
    }
});

});

Just put this at the top:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>