Dynamic label that behaves strangely on 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/5/" rel="nofollow">JSF link</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>I have managed to code the JS to satisfy the conditions where the label goes red for highlighting the label that is to be edited but there are a few oddities with the behaviour that I do not know how to fix so any suggestions would be greatly appreciated.</p>

<p>Bug 1:  It seems that if you click on the label it starts off going red (as it should be) but when you click away it stays red rather than change to black. However, this isn't a bug if click anywhere on the input but not on the label, it works as it should be. </p>

<p>Bug 2:  If you click on the input but not on the label, it goes red and then if you click on the input again but on the label it briefly goes black before going red again (it should stay red as we have not gone away from the input)</p>

<p>I'm afraid I can only take answers that are JavaScript-based rather than JQuery.</p>
