Prefilling HTML fields in IE7 & IE8

Question

Just had a problem reported about a date of birth sign up form on our website. The form is prefilled with sample values. This works fine in Firefox, Chrome (and to an extent IE9), but not IE7 or IE8. I can tab into the fields but not click into them. It seems that the prefilled values are getting in the way of being able to select the box (in IE9 I can only click to select the input field if I click just in front of the value).

<div class="DobBack">
    <input name="dobD" id="dobD" type="text" value="" class="ab abReq abDob abNum" />
    <div class="abInputText">DD</div>
</div>

<div class="abDobBack">
    <input name="dobM" id="dobM" type="text" value="" class="ab abReq abDob abNum" maxlength=2 />
    <div class="abInputText">MM</div>
</div>

<div class="abDobBack">
    <input name="dobY" id="dobY" type="text" value="" class="ab abReq abDob abNum" maxlength=4 />
    <div class="abInputText">YYYY</div>
</div> ​

Is this a problem with the code or with IE or both? No idea how long the problem has been going on, there's been no updates for months, but just suddenly getting the questions.

Answer 1

I'm going to go out on a limb and assume this is PHP.

  <div class="DobBack">
        <input name="dobD" id="dobD" type="text" value="<?php echo $dobD ?>" onfocus="value=\'\'" class="ab abReq abDob abNum"></input>
        <div class="abInputText">DD</div>
    </div>

    <div class="abDobBack">
        <input name="dobM" id="dobM" type="text" value="<?php echo $dobM ?>'" class="ab abReq abDob abNum" maxlength=2 />
        <div class="abInputText">MM</div>
    </div>

    <div class="abDobBack">
        <input name="dobY" id="dobY" type="text" value="<?php echo $dobY ?>" class="ab abReq abDob abNum" maxlength=4 />
        <div class="abInputText">YYYY</div>
    </div> 

If not, what is $dobM, what language is this, where is $dobM defined, can you post full code?

Part 2

$html='<div class="DobBack">
    <input name="dobD" id="dobD" type="text" value="'.$dobD.'" onfocus="value=\'\'" class="ab abReq abDob abNum"></input>
    <div class="abInputText">DD</div>
</div>

<div class="abDobBack">
    <input name="dobM" id="dobM" type="text" value="'.$dobM.'" class="ab abReq abDob abNum" maxlength=2 />
    <div class="abInputText">MM</div>
</div>

<div class="abDobBack">
    <input name="dobY" id="dobY" type="text" value="'.$dobY.'" class="ab abReq abDob abNum" maxlength=4 />
    <div class="abInputText">YYYY</div>
</div> ​';

It should look like that.

Go to view source to see if the value shows up. you should see if ($dobY == 1985)

The other potential issue is the onfocus event. try onFocus="this.value=''; return false;"