UNPKG

6.16 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <title>HTML5 placeholder polyfill</title>
5
6<!-- DEMO styles. Only needed for this Example. Not pretty... -->
7 <link rel="stylesheet" href="demo.css">
8
9<!-- include the default Javascript (jQuery and Modernizr) -->
10 <script src="../libs/modernizr-2.0.6.min.js" charset="utf-8"></script>
11 <script src="../libs/jquery-1.6.2.min.js" charset="utf-8"></script>
12
13</head>
14<body>
15 <ul id="nav">
16 <li><a href="index.html">Basic Example</a></li>
17 <li><strong>Example using Modernizr</strong></li>
18 <li><a href="index-chromeish.html">Example that hides on type instead on focus</a></li>
19 <li><a href="index-force.html">Example that runs the polyfill in all Browsers</a></li>
20 </ul>
21 <h1>HTML5 Placeholder Polyfill Examples</h1>
22 <p>The Placeholder Attribute has decent support across current Browsers. This Script adds support for the older generations including:</p>
23 <ul id="browserlist">
24 <li>Internet Explorer &lt; 10</li>
25 <li>Firefox &lt; 4.0</li>
26 <li>Safari &lt; 4.0</li>
27 <li>iOS Safari &lt; 4.0</li>
28 <li>Android Browser &lt; 2.0</li>
29 </ul>
30 <p>for more details on native support see the Browser suppport table at <a href="http://caniuse.com/#search=placeholder">caniuse.com</a></p>
31
32 <h2>Update Placeholder Attribute</h2>
33 <form>
34 <label for="updatetest">Some Number:</label>
35 <input placeholder="e.g. 42" type="text" name="updatetest" id="updatetest">
36 <button id="updatetestbutton" type="button">alert current Placeholder and change it</button>
37 </form>
38
39 <h2>Form Elements with explicit labels (using id and for)</h2>
40 <form>
41 <label for="firstname">Firstname:</label>
42 <input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
43 <br>
44 <label for="lastname">Lastname:</label>
45 <input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
46 <br>
47 <label for="street">Street:</label>
48 <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
49 <br>
50 <label for="password">password:</label>
51 <input placeholder="e.g. the Dude" type="password" name="password" id="password">
52 <br>
53 <label for="message">Message:</label>
54 <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" id="message" rows="2"></textarea>
55 <br>
56 <input type="submit" value="send">
57 </form>
58
59
60 <h2>Form Element with visually hidden label (i.e. for search boxes)</h2>
61 <h3>Using the "visuallyhidden" class from i.e. HTML5 Boilerplate</h3>
62 <p>HTML5 Boilerplate uses a way to visually hide elements that makes it impossible for containing elements (like the polyfilled Placeholder) to be visible. To make it work anyway the Polyfill changes said technique (only for labels) with a technique that is less obstrusive but still hides them.</p>
63 <form>
64 <label class="visuallyhidden" for="search2">Search:</label>
65 <input placeholder="e.g. Yourself..." type="text" name="search" id="search2">
66 <input type="submit" value="search">
67 </form>
68
69 <h3>Using the oldschool "offscreen" class (pushing the element to the far left using position:absolute)</h3>
70 <form>
71 <label class="offscreen" for="search">Search:</label>
72 <input placeholder="e.g. Yourself..." type="text" name="search" id="search">
73 <input type="submit" value="search">
74 </form>
75
76
77 <h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
78 <form class="implicit">
79 <label>Firstname:
80 <input placeholder="e.g. Jeff" type="text" name="firstname">
81 </label>
82 <br>
83 <label>Lastname:
84 <input placeholder="e.g. Lebowski" type="text" name="lastname">
85 </label>
86 <br>
87 <label>Street:
88 <input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
89 </label>
90 <br>
91 <label>password:
92 <input placeholder="e.g. the Dude" type="password" name="password">
93 </label>
94 <br>
95 <label>Message:
96 <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
97 </label>
98 <br>
99 <input type="submit" value="send">
100 </form>
101
102<!-- this is where the Magic happens — we feature test for placeholder support and load the polyfill if needed -->
103
104 <script type="text/javascript" charset="utf-8">
105 // remove/add the second slash in the following line to toggle between production and dev block
106
107 Modernizr.load({
108 test: Modernizr.input.placeholder,
109 nope: [
110 '../libs/onfontresize.jquery.min.js', // optional
111 '../libs/jquery.ba-resize.min.js', // optional
112 '../src/placeholder_polyfill.css',
113 '../src/placeholder_polyfill.jquery.js', // this and the css above are the only required files
114 ]
115 });
116
117 </script>
118
119<!-- ignore from here on -->
120
121 <a href="https://github.com/ginader/HTML5-placeholder-polyfill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
122
123<!-- DEMO JS Only needed for this Example. Not needed -->
124 <script src="demo.js" charset="utf-8"></script>
125
126 <script type="text/javascript">
127 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
128 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
129 </script>
130 <script type="text/javascript">
131 var pageTracker = _gat._getTracker("UA-299719-2");
132 pageTracker._initData();
133 pageTracker._trackPageview();
134 </script>
135
136</body>
137</html>