UNPKG

7.03 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><strong>Basic Example</strong></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><a href="index-force.html">Example that runs the polyfill in all Browsers</a></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
36 <h2>Create new Formfields</h2>
37 <form>
38 <label class="duplicate">Some Number:
39 <input placeholder="e.g. 42" type="text" name="newtest">
40 </label><br>
41 <button id="newtestbutton" type="button">add new field</button>
42 </form>
43
44 <h2>Update Placeholder Attribute</h2>
45 <form>
46 <label for="updatetest">Some Number:</label>
47 <input placeholder="e.g. 42" type="text" name="updatetest" id="updatetest">
48 <button id="updatetestbutton" type="button">alert current Placeholder and change it</button>
49 </form>
50
51 <h2>Form Elements with explicit labels (using id and for)</h2>
52 <form>
53 <label for="firstname">Firstname:</label>
54 <input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
55 <br>
56 <label for="lastname">Lastname:</label>
57 <input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
58 <br>
59 <label for="street">Street:</label>
60 <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">
61 <br>
62 <label for="password">password:</label>
63 <input placeholder="e.g. the Dude" type="password" name="password" id="password">
64 <br>
65 <label for="message">Message:</label>
66 <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>
67 <br>
68 <input type="submit" value="send">
69 </form>
70
71
72 <h2>Form Element with visually hidden label (i.e. for search boxes)</h2>
73 <h3>Using the "visuallyhidden" class from i.e. HTML5 Boilerplate</h3>
74 <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>
75 <form>
76 <label class="visuallyhidden" for="search2">Search:</label>
77 <input placeholder="e.g. Yourself..." type="text" name="search" id="search2">
78 <input type="submit" value="search">
79 </form>
80
81 <h3>Using the oldschool "offscreen" class (pushing the element to the far left using position:absolute)</h3>
82 <form>
83 <label class="offscreen" for="search">Search:</label>
84 <input placeholder="e.g. Yourself..." type="text" name="search" id="search">
85 <input type="submit" value="search">
86 </form>
87
88
89 <h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
90 <form class="implicit">
91 <label>Firstname:
92 <input placeholder="e.g. Jeff" type="text" name="firstname">
93 </label>
94 <br>
95 <label>Lastname:
96 <input placeholder="e.g. Lebowski" type="text" name="lastname">
97 </label>
98 <br>
99 <label>Street:
100 <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">
101 </label>
102 <br>
103 <label>password:
104 <input placeholder="e.g. the Dude" type="password" name="password">
105 </label>
106 <br>
107 <label>Message:
108 <textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
109 </label>
110 <br>
111 <input type="submit" value="send">
112 </form>
113
114<!-- optional but recommend - repositions the placeholders when a user resizes their font size -->
115 <script src="../libs/onfontresize.jquery.min.js" charset="utf-8"></script>
116<!-- highly optional - repositions the placeholders when a user resizes a textarea. If not used then textarea resizing will simply be disabled -->
117 <script src="../libs/jquery.ba-resize.min.js" charset="utf-8"></script>
118<!-- this is where the Magic happens — simply include the polyfill and it will only execute if needed -->
119 <script>
120 placeHolderConfig = {
121 // forcing the polyfill to run no matter if the browser could do it without help
122 forceApply : true
123 }
124 </script>
125 <script src="../src/placeholder_polyfill.jquery.js" charset="utf-8"></script>
126
127 <script>
128 (function($) {
129 $('#newtestbutton').click(function(){
130 $('<br><label class="duplicate">Some Number: <input placeholder="e.g. 42" type="text" name="newtest"></label>').insertAfter('.duplicate:last');
131 $('input[placeholder], textarea[placeholder]').placeHolder();
132 });
133 })(jQuery);
134 </script>
135
136
137<!-- ignore from here on -->
138
139 <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>
140
141<!-- DEMO JS Only needed for this Example. Not needed -->
142 <script src="demo.js" charset="utf-8"></script>
143
144 <script type="text/javascript">
145 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
146 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
147 </script>
148 <script type="text/javascript">
149 var pageTracker = _gat._getTracker("UA-299719-2");
150 pageTracker._initData();
151 pageTracker._trackPageview();
152 </script>
153
154</body>
155</html>