title: Jquery inline password field
body: <p>I am writing a function to initialize all fields with a certain class to be inline labels. I have the obvious problem of password fields showing * instead of characters. I have almost overcome this problem, except somewhere down the line. When I switch between username and password, the values I stored to be replaced on blur or on focus are being lost. Here is the code I created so far. It is part of a function that is called at document ready.</p>
  
  <pre><code>$('.inlineLabel').focus(function() {
      if ($(this).attr("initial") === undefined) {
          $(this).attr("initial",$(this).val());
      }
      if ($(this).val() === $(this).attr("initial")) {
          $(this).val("");
      }
  }).blur(function() {
      if ($(this).val() === "") {
          $(this).val($(this).attr("initial"));
      }
  });
  
  var passwordElement = $('input#password').clone(true);
  
  var label = $("&lt;input type='text' /&gt;").attr({
      id: 'label',
      name: passwordElement.name,
      value: 'Password' });
  passwordElement.blur(function() {
      $('input#password').replaceWith(label);
  });
  
  $(this).replaceWith(label);
  
  
  
  label.focus(function() {
      $(this).replaceWith(passwordElement);
      console.log(passwordElement);
      $('input#password').focus();
  });
  </code></pre>