Fallback for HTML 5 Placeholder

Get Started
1

Hi all, I was hoping someone could point me in the right direction for a simple to use fallback for placeholder, as it doesn’t work in IE.

Thanks.
Al.

2

The alternative is to use JavaScript. For example, place this at the bottom of your page, before the closing </body> ailment:

<script type="text/javascript" >

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function resetFields(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.defaultValue) continue;
    element.onfocus = function() {
    if (this.value == this.defaultValue) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.defaultValue;
      }
    }
  }
}

function prepareForms() {
  for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
  }
}

addLoadEvent(prepareForms);
</script>
3

Thanks for the reply. Do I need to add/edit anything else after the above code has gone into the page?

4

Ah, good question. All you need to do is add a default value to each form field, like so:

<label for="email">Email Address</label><br>
<input name="email" type="text" id="email" [COLOR="#FF0000"]value="Enter your Email Address"[/COLOR]>
5

Great thanks ralph, that’s working now :slight_smile:

6

Cool. :slight_smile: Sorry I left out that key information before, too. :rolleyes: