Label for password field

问题:

<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

回答1:

There are plugins for that. See labelify for example

回答2:

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

回答3:

Check In-Field Labels jQuery Plugin http://fuelyourcoding.com/scripts/infield/

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

回答5:

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

回答6:

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

回答7:

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?