Label for password field

10,579

Solution 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

Solution 2

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

Solution 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";
    }
  });
};
};
Share:
10,579
eozzy
Author by

eozzy

UI Designer &amp; Front-end Developer

Updated on June 04, 2022

Comments

  • eozzy
    eozzy almost 2 years
    <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