Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google's html5 shiv not rendering placeholders?

I have a form which the client wants the labels inside the input box and I decided to use HTML 5's placeholder and Google's html5shiv, instead of the old javascript. My placeholders, however, don't seem to work properly in IE, which is what I was using the shiv for. Here is the code:

Doctype:

<!DOCTYPE html>

Shiv:

<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

Form:

<form method="post" enctype="multipart/form-data" name="contactForm" id="contactForm">

    <input type="text" name="name" id="name" placeholder="Your Full Name..." />
    <input type="text" name="telephone" id="telephone" placeholder="Your Telephone Number..." />
    <input type="email" name="email" id="email" placeholder="Your Email Address..." />
    <textarea name="enquiry" id="enquiry" placeholder="Your Enquiry or Comments..."></textarea>
    <p class="midpadLeft green_Button_margin_2"><span class="green_Button_2"><a href="javascript: document.contactForm.submit();" target="_self" class="green_Button_2">Submit Enquiry <img src="images/mid-envelope.png" alt="Submit"/></a></span></p>

</form>

Any ideas as to why it's not working?

Revision:

Using code suggested in the comments below, I have changed my code to the following, but it is still not working.

Script including (the contents of that script was copied directly from here):

<script type="text/javascript" src="scripts/placeholders.js" charset="utf-8"></script>

DOM ready event listener:

<body onload="Placeholders.init(true);">
like image 830
Phil Young Avatar asked Nov 29 '22 03:11

Phil Young


1 Answers

The HTML5 Shiv simply enables styling for previously unknown elements in IE. The most recent version does a few things extra, like patching document.createElement, but other than that it doesn’t polyfill anything.

If you want to emulate placeholder, use a placeholder polyfill. I’ve written one in jQuery plugin format, if you’re interested: http://mths.be/placeholder

Use it as follows:

$('input, textarea').placeholder();

Here’s a demo: http://mathiasbynens.be/demo/placeholder

Btw, you should be using <label> instead of @placeholder if the text is “Your Full Name” etc.

like image 195
Mathias Bynens Avatar answered Dec 09 '22 19:12

Mathias Bynens