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

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

There are plugins for that. See labelify for example

Answer 4

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

Answer 5

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?

Answer 6

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";
    }
  });
};
};