Remove text from text box on focus

I have two text boxes and the focus effect only works in the first one. I want the text to be deleted when the mouse focuses on the text box.

<input class="header-text-box-2" type="text" name="email" value="&nbsp;&nbsp;&nbsp;Enter Email Address" onFocus="this.value='';">
<input class="header-text-box" type="text" name="pass" value="&nbsp;&nbsp;&nbsp;Enter Password" onFocus="this.value='';" />


.header-text-box {
margin: 65px 0 0 160px;
height: 38px;
width: 200px;
background-color: #e6e7e9;
}

.header-text-box-2 {
margin: 65px 0 0 60px;
height: 38px;
width: 200px;
background-color: #e6e7e9;
}

 

Uhm... you have something that is slightly more modern, and has been in use for... quite a while. It's called placeholders, and is used as follows:

<input type="text" name="email" id="email" placeholder="Enter Email Address">

Code (markup):

 

Just beware that BOTH placeholder and the scripttardery you had in the initial post are inaccessible trash, particularly for what you are using them for. It's called "ambiguous UI" and why even the HTML specification says "Placeholder is NOT a substitute for a label"

Which is why that show/hide text as the label trick is idiotic halfwit rubbish you really have NO business doing on a website in that manner unless it's in addition TO a label. Placeholder exists to show a sample of POSSIBLE input, NOT to say what that input is FOR!

But then you seem to be slopping pixel measurements all over the place too so I guess you drop-kicked accessibility and usability out the window?