Label for password field

Question

I\'m using jQuery to make the inline labels

Answer 1

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

Answer 2

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

Answer 3

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 4

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

Answer 5

There are plugins for that. See labelify for example

Answer 6

My solution is close to what Dan provided above.

<script language="javascript" type="text/javascript">
    function SwapLabel(id, label, alttype) {
        $(id).focus(function () {
            if (this.value == label) {
                this.value = "";
                if (this.type == 'text' && label == 'Password') {
                    this.type = alttype;
                }
            }
        });
        $(id).blur(function () {
            if (this.value == "") {
                this.value = label;
                if (this.type == alttype && label == 'Password') {
                    this.type = 'text';
                }
            }
        });
    }
    $(document).ready(function () {
        SwapLabel('#UserName', 'Username', '');
        SwapLabel('#Password', 'Password', 'password');
    });
</script>

An alternative here would be to omit the "label" parameter, and just use the "title" value, which is basically what labelify.js does. You could add in the part of labelify that just applies these event handlers to all inputs of type text if you wanted. Or download labelify and add the below code where needed:

            if (this.type == 'text' && label == 'Password') {
                this.type = alttype;
            }

            if (this.type == 'text' && label == 'Password') {
                this.type = alttype;
            }

The only advantage my snippet has over labelify is that it includes the answer to your original question:

I wonder if its possible somehow to show "Password" label as text (instead of ••••) inside the password field?