All geek questions in one place

Does Google html5 not support placeholder rendering?

I have a form that the client wants labels inside the input field, and I decided to use HTML 5 placeholder and Google html5shiv instead of the old javascript instead. However, my placeholders do not work properly in IE, for which I use shiv. 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]-->

The 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 is not working?

Revision:

Using the code suggested in the comments below, I changed my code to the following, but it still doesn't work.

Script including (the contents of this script have been 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);">
+4
source share
2 answers

HTML5 Shiv simply allows you to style previously unknown elements in IE. The latest version does a few things, such as patching document.createElement , but the polyfill does nothing else.

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

Use it as follows:

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

Here is a demo: http://mathiasbynens.be/demo/placeholder

Btw, you should use <label> instead of @placeholder if the text is "Your full name", etc.

+22
source

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 compared both methods, and the watermark seems to be better at entering a password, but its not so easy to set up a watermark.

0
source

Source: https://habr.com/ru/post/1396394/

More articles:


All Articles