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=".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);">
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);">
2 Answers
Reset to default 22The 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.
Check out Todd Northrop's jquery.watermark NuGet package too.
//polyfill placeholder in older browsers
var inputs = $('input, textarea');
$.each(inputs, function (i, itm) {
var input = $(itm);
input.watermark(input.attr('placeholder'));
});
I have compared both methods provided, and watermark seems to cope with Password inputs better, but its not quite as easy to set up watermark.
placeholderattribute. There are various shims available though (mostly jQuery)... see Modernizr for a list, or my own attempt (which doesn't require jQuery) – James Allardice Commented Feb 14, 2012 at 12:53