8

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:

enter image description here

What I want it to look like:

enter image description here

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" />
theorise
  • 6,637
  • 11
  • 43
  • 62
  • 1
    You might be able to hack it by changing the type of the field dynamically (ie. first "text", change to "password" on activation). I'm not 100% sure this will work. – Juho Vepsäläinen Jan 25 '11 at 18:07

5 Answers5

18

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()" />
Community
  • 1
  • 1
Diogo Cardoso
  • 19,349
  • 24
  • 92
  • 137
11

Change your password input to be a simple input type text. Then, with JavaScript (or JQuery) on focus event, change it to be a input type password.

Here is a little untested sample with plain JavaScript (no JQUERY):

<html>
<head>
   <script type="text/javascript">
      function makeItPassword()
      {
         document.getElementById("passcontainer")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("password").focus();
      }
   </script>
</head>
<body>
   <form>
      <span id="passcontainer">
         <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" />
      </span>
   </form>
</body>
</html>
Pablo Santa Cruz
  • 162,219
  • 30
  • 224
  • 277
  • 3
    +1. That's how I would do it. `$("#password").bind("focus", function () { $(this).val(""); $(this).attr("type", "password"); });` – Josh K Jan 25 '11 at 18:12
  • 1
    Note that changing the `type` of `input` elements is will not work properly on IE. See also: http://stackoverflow.com/questions/1544317/ – Christian C. Salvadó Jan 25 '11 at 18:15
  • @CMS: Do you think the same thing applies if you create a new DOM element instead of changing an existing one? (look at my code sample). – Pablo Santa Cruz Jan 25 '11 at 18:22
  • Sadly this breaks the iPhone keyword :s – Hassek Jun 18 '12 at 23:05
  • In 2018, you should use the `placeholder` attribute, which has [good browser support now](https://caniuse.com/#feat=input-placeholder), instead of this hack. – Scribblemacher Mar 23 '18 at 20:07
6

A simple solution:

<input id="username" name="username" class="input_text" type="text" placeholder="Username"  />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
Ms2ger
  • 14,822
  • 6
  • 34
  • 35
1

Add the following code to your javascript:

function makePasswordHidden() {
    document.getElementById("password").setAttribute("type", "password");
}

Change the input for the password to:

<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

What this does it it makes the input element a 'password' and the value is updated so that it is hidden. If you would like for the value="Password" to be visible if the field is left empty then add the following javascript function:

function makePasswordShown() {
    document.getElementById("password").setAttrivute("type", "text");
}

And add the following to your password input:

onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
Levi Meredith
  • 119
  • 8
-2

I had another idea to deal with this problem and you will need no Javascript:

<input onclick="value=''; type='password';" name="password" type="text" value="Password" />

Or you can also do it like this:

<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

I do not know the difference between this possibilities. Another thing you could change is to write instead of onclick=....... onfocus=.....

I don't know the difference here, too.

But I hope I could help you. PS: Sorry because of my bad English I'm German.

mhu
  • 17,099
  • 10
  • 54
  • 83
Leon5637
  • 1
  • 1