SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fallback for HTML 5 Placeholder

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The alternative is to use JavaScript. For example, place this at the bottom of your page, before the closing </body> ailment:

    Code:
    <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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. Do I need to add/edit anything else after the above code has gone into the page?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by allanlud View Post
    Do I need to add/edit anything else after the above code has gone into the page?
    Ah, good question. All you need to do is add a default value to each form field, like so:

    Code:
    <label for="email">Email Address</label><br>
    <input name="email" type="text" id="email" value="Enter your Email Address">
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks ralph, that's working now

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by allanlud View Post
    Great thanks ralph, that's working now
    Cool. Sorry I left out that key information before, too.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •