Label for password field

Question

<input type="text" value="useraname" />
<input type="password" value="password" />

I'm using jQuery to make the inline labels disappear on click/focus. Password shows bulls as usual, but I wonder if its possible somehow to show "Password" label as text (instead of ••••) inside the password field?

Edited to add: I want the user-typed password to be hidden ofcourse!.

Thanks

Answer 1

If you make the input type="textbox" you'll be able to see the password.

Answer 2

There are plugins for that. See labelify for example

Edit: this one handle passwords correctly

Answer 3

I think you'd need to dynamically overlay an <input type="text"> on top of the password field to do this.

Answer 4

Check out the code below. Just append addPassClear("Password") to any input element that you want this functionality for.

$(function() {
$.fn.addPassClear =
function(text)
{
  return $(this).each(
  function()
  {
    $(this).focus(function(event){$(this).passFocusize(text); $(this).select(); });
    $(this).blur(function(event){$(this).passBlurize(text); });
  });
}
$.fn.passFocusize =
function(text)
{
  return $(this).each(
  function()
  {
    if ($(this).val()==text && $(this).attr("type")=="text")
    {
      $(this).val("");
      this.type="password";
    }
  });
};
$.fn.passBlurize =
function(text)
{
  return $(this).each(
  function()
  {
    if ($(this).val()=="")
    {
      $(this).val(text);
      this.type="text";
    }
  });
};
};

Answer 5

why all that long script for? that jus a simple task which can be done with a half line of code :

<input type='text' onclick="this.type='password',value=''" class='watever' value='password'..etc  

cheers