javascript - Set default value of a password input so it can be read

Question

I want to have a password field which says "Password" in it before a user enters their password (so they know what the field is)

I'd rather just use Javascript, importing jQuery for this alone seems wasteful, but I have no idea how to. The images explain quite clearly:

What it looks like:

What I want it to look like:

It's only a very simple website and the most basic of logins (has no validation etc)

Any ideas?

<input id="username" name="username" class="input_text" type="text" value="Username"  />
<input id="password" name="password" class="input_text" type="password" value="Password" />                 

Answer 1

If you're using HTML5 then you should use the placeholder attribute.

<input id="username" name="username" class="input_text" type="text" placeholder="Username"  />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

---

If you're using HTML4 you can create a fake password field.

<script type="text/javascript">
    function pwdFocus() {
        $('#fakepassword').hide();
        $('#password').show();
        $('#password').focus();
    }

    function pwdBlur() {
        if ($('#password').attr('value') == '') {
            $('#password').hide();
            $('#fakepassword').show();
        }
    }
</script>

<input id="username" name="username" class="input_text" type="text" v="Username"  />
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" />
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />