UNPKG

6.58 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 CSS -->
10 <link rel="stylesheet" href="../src/placeholder_polyfill.css">
11
12<!-- include the default Javascript (jQuery) -->
13 <script src="../libs/jquery-1.6.2.min.js" charset="utf-8"></script>
14
15</head>
16<body>
17 <ul id="nav">
18 <li><a href="index.html">Basic Example</a></li>
19 <li><a href="index-modernizr.html">Example using Modernizr</a></li>
20 <li><a href="index-chromeish.html">Example that hides on type instead on focus</a></li>
21 <li><strong>Example that runs the polyfill in all Browsers</strong></li>
22 </ul>
23 <h1>HTML5 Placeholder Polyfill Examples</h1>
24 <p>The Placeholder Attribute has decent support across current Browsers. This Script adds support for the older generations including:</p>
25 <ul id="browserlist">
26 <li>Internet Explorer &lt; 10</li>
27 <li>Firefox &lt; 4.0</li>
28 <li>Safari &lt; 4.0</li>
29 <li>iOS Safari &lt; 4.0</li>
30 <li>Android Browser &lt; 2.0</li>
31 </ul>
32 <p>for more details on native support see the Browser suppport table at <a href="http://caniuse.com/#search=placeholder">caniuse.com</a></p>
33 <p>Other than most other solutions this Polyfill will read the Placeholder Text to Screenreaders. It does this by adding the Text to the form fields asociated Label.</p>
34
35 <h2>Update Placeholder Attribute</h2>
36 <form>
37 <label for="updatetest">Some Number:</label>
38 <input placeholder="e.g. 42" type="text" name="updatetest" id="updatetest">
39 <button id="updatetestbutton" type="button">alert current Placeholder and change it</button>
40 </form>
41
42 <h2>Form Elements with explicit labels (using id and for)</h2>
43 <form>
44 <label for="firstname">Firstname:</label>
45 <input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
46 <br>
47 <label for="lastname">Lastname:</label>
48 <input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
49 <br>
50 <label for="street">Street:</label>
51 <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">
52 <br>
53 <label for="password">password:</label>
54 <input placeholder="e.g. the Dude" type="password" name="password" id="password">
55 <br>
56 <label for="message">Message:</label>
57 <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>
58 <br>
59 <input type="submit" value="send">
60 </form>
61
62
63 <h2>Form Element with visually hidden label (i.e. for search boxes)</h2>
64 <h3>Using the "visuallyhidden" class from i.e. HTML5 Boilerplate</h3>
65 <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>
66 <form>
67 <label class="visuallyhidden" for="search2">Search:</label>
68 <input placeholder="e.g. Yourself..." type="text" name="search" id="search2">
69 <input type="submit" value="search">
70 </form>
71
72 <h3>Using the oldschool "offscreen" class (pushing the element to the far left using position:absolute)</h3>
73 <form>
74 <label class="offscreen" for="search">Search:</label>
75 <input placeholder="e.g. Yourself..." type="text" name="search" id="search">
76 <input type="submit" value="search">
77 </form>
78
79
80 <h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
81 <form class="implicit">
82 <label>Firstname:
83 <input placeholder="e.g. Jeff" type="text" name="firstname">
84 </label>
85 <br>
86 <label>Lastname:
87 <input placeholder="e.g. Lebowski" type="text" name="lastname">
88 </label>
89 <br>
90 <label>Street:
91 <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">
92 </label>
93 <br>
94 <label>password:
95 <input placeholder="e.g. the Dude" type="password" name="password">
96 </label>
97 <br>
98 <label>Message:
99 <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
100 </label>
101 <br>
102 <input type="submit" value="send">
103 </form>
104
105<!-- optional but recommend - repositions the placeholders when a user resizes their font size -->
106 <script src="../libs/onfontresize.jquery.min.js" charset="utf-8"></script>
107<!-- highly optional - repositions the placeholders when a user resizes a textarea. If not used then textarea resizing will simply be disabled -->
108 <script src="../libs/jquery.ba-resize.min.js" charset="utf-8"></script>
109 <!-- required if hideOnFocus is set to false to be able to efficiently poll for input text changes -->
110 <script src="../libs/rAF.min.js" charset="utf-8"></script>
111<!-- this is where the Magic happens — simply include the polyfill and it will only execute if needed -->
112 <script>
113 placeHolderConfig = {
114 // forcing the polyfill to run no matter if the browser could do it without help
115 forceApply : true
116 }
117 </script>
118 <script src="../src/placeholder_polyfill.jquery.js" charset="utf-8"></script>
119
120
121
122<!-- ignore from here on -->
123
124 <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>
125
126<!-- DEMO JS Only needed for this Example. Not needed -->
127 <script src="demo.js" charset="utf-8"></script>
128
129 <script type="text/javascript">
130 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
131 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
132 </script>
133 <script type="text/javascript">
134 var pageTracker = _gat._getTracker("UA-299719-2");
135 pageTracker._initData();
136 pageTracker._trackPageview();
137 </script>
138
139</body>
140</html>