title: Clearing Input Fields with JavaScript
body: <p>I've been looking at this for the last few hours, and can't really achieve what I'm looking for. I currently have the following two inputs:</p>
  
  <pre><code>&lt;input type="text" id="username" value="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /&gt;
  &lt;input type="password" id="password" value="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /&gt;
  </code></pre>
  
  <p>Initially, the inputs text is grey, and I have the following JavaScript functions onfocus and onblur:</p>
  
  <pre><code>var defaultInput = "";
  
  function inputFocused(obj){
      defaultInput = obj.value;   
      obj.value = "";
      obj.style.color = "#000";
  }
  
  function inputBlurred(obj){
      if(obj.value == ""){
          obj.style.color = "#AAA";
          obj.value = defaultInput;
      }
  }
  </code></pre>
  
  <p>I'm trying to devise a way so that once I start typing into a field, leave the field, then return, it will not clear the input again (since it will then contain something the user typed in it). I've thought of achieving this with some kind of variable that I can alternate between 1 and 0 depending on the state, but that seemed sloppy. Any insight for this JS novice is greatly appreciated.</p>