ghost text is not working in ie9

Question

I am using ghost text in all the browser it is working fine but in ie9 or ie8 not. step-1 load the page step-2 enter submit validation message came step3-place the cursor on particular field ghost text is not removing.(w/o enter submit button cursor placed on particular field ghost text is gone off).

My code as below.

<?php
echo $this->Form->input('service_address1', array(
    'id'        => 'address1',
    'div'       => false,
    'label'     => false, 
    'tabindex'  => '0',
    'class'     => 'form-bg',
    'maxlength' => 250,
    'value'     => 'Address',
    'onblur'    => "if(this.value=='') { this.value='Address'; }",
    "onfocus"   => "if(this.value == 'Address') { this.value = ''; }"
));
?>    

Answer 1

Your code is fine. Please check any issue in your other codes in the same page. May be the issue is coming from your script code if you are using any script functions.

1. In IE8 and IE9 Press F12 , it will show the console option
2. Refresh your page and check if any issue showing on the page
3. Proceed with Submit

If have any bugs or error in script it will showing on the console.

Answer 2

This is a bug in IE9 and reported at many places as well. Whenever a table renders multiple rows dynamically. IE 9 creates some ghost cells which are unwanted and disturbs the alignment of the UI.

So to prevent the unwanted ghost cells in your html table while rendering, just use this useful script

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

This javascript function you should call when the page loads (ie onload event )