title: JavaScript - Input placeholder text using background image onload issue
body: <p>I have an input type="text" field and am trying to substitute the HTML5 placeholder property that is not widely supported with a background image of some default text.</p>
  
  <p>And in JavaScript, removing the background image when the form receives focus (so that the text the user types in the field does not overlap with the text in the background image) and replacing the background image when the input loses focus (I am using the <code>onBlur</code> event).</p>
  
  <p>This works fine except that when a user types text into the input field, heads to another page without submitting this text and hits the back to previous page button in their browser, the page reloads but with their previous text, that they did not submit, still in the input field on top of the background image.</p>
  
  <p>I tried to fix this by checking if the form has value when the page loads, and if it does then remove the background image but this part isn't working for me.</p>
  
  <pre><code>&lt;input type="text" id="food" onLoad="if(this.value!=''){this.style.backgroundImage='none';}" onFocus="this.style.backgroundImage='none';" onBlur="if(!this.value){this.style.backgroundImage='url(pics/m_form_post.png)';}" name="food"/&gt;
  </code></pre>
  
  <p>I am open for possible solutions.</p>