Dynamic label that changes based upon event handler
<p>I have a snippet of HTML that is part of a form where there are two input's. Via CSS I have managed to make the label associated with each input to sit inside their corresponding input to act as a placeholder.</p>

<p>Now, with some standard JS (not JQuery I'm afraid), I wanted to capture the event that the user does (i.e. on a mouse click or keyboard press) on the input and dynamically change the look and feel of the label.</p>

<p><a href="http://jsfiddle.net/8nBAQ/2/" rel="nofollow">http://jsfiddle.net/8nBAQ/2/</a></p>

<p>The conditions that I need to meet are:</p>

<ol>
<li><p>When a user clicks on the input for the first time. The label changes colour to a light grey.  After click, if the user then enters a character, the label disappears and the character you have just pressed is displayed instead.</p></li>
<li><p>When a user clicks on the input for the first time. The label changes colour to a light grey.  After click, if the user then clicks or tabs away from the input, the label changes colour back to it's original state of black.</p></li>
<li><p>After entering a few characters into the input, if the user decides to delete the whole set of characters by either pressing backspace deleting each character until none are left or highlighting the whole set of characters with a mouse and presses the delete key, the label appears but is in a light grey colour.</p></li>
</ol>

<p>Any help you can offer with the JS would be great!</p>

<p>Thanks
-JaXL</p>
