UNPKG

rucksack-css/bower_components/html5-placeholder-polyfill/web/readme.html

Version:

1<!DOCTYPE  html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    
6    <title>doc</title>
7    <style>
8      /*github.com style (c) Vasily Polovnyov <vast@whiteants.net>*/
9      pre code {
10        display: block; padding: 0.5em;
11        color: #333;
12        background: #f8f8ff
13      }
14      pre .comment,
15      pre .template_comment,
16      pre .diff .header,
17      pre .javadoc {
18        color: #998;
19        font-style: italic
20      }
21      pre .keyword,
22      pre .css .rule .keyword,
23      pre .winutils,
24      pre .javascript .title,
25      pre .nginx .title,
26      pre .subst,
27      pre .request,
28      pre .status {
29        color: #333;
30        font-weight: bold
31      }
32      pre .number,
33      pre .hexcolor,
34      pre .ruby .constant {
35        color: #099;
36      }
37      pre .string,
38      pre .tag .value,
39      pre .phpdoc,
40      pre .tex .formula {
41        color: #d14
42      }
43      pre .title,
44      pre .id {
45        color: #900;
46        font-weight: bold
47      }
48      pre .javascript .title,
49      pre .lisp .title,
50      pre .clojure .title,
51      pre .subst {
52        font-weight: normal
53      }
54      pre .class .title,
55      pre .haskell .type,
56      pre .vhdl .literal,
57      pre .tex .command {
58        color: #458;
59        font-weight: bold
60      }
61      pre .tag,
62      pre .tag .title,
63      pre .rules .property,
64      pre .django .tag .keyword {
65        color: #000080;
66        font-weight: normal
67      }
68      pre .attribute,
69      pre .variable,
70      pre .lisp .body {
71        color: #008080
72      }
73      pre .regexp {
74        color: #009926
75      }
76      pre .class {
77        color: #458;
78        font-weight: bold
79      }
80      pre .symbol,
81      pre .ruby .symbol .string,
82      pre .lisp .keyword,
83      pre .tex .special,
84      pre .prompt {
85        color: #990073
86      }
87      pre .built_in,
88      pre .lisp .title,
89      pre .clojure .built_in {
90        color: #0086b3
91      }
92      pre .preprocessor,
93      pre .pi,
94      pre .doctype,
95      pre .shebang,
96      pre .cdata {
97        color: #999;
98        font-weight: bold
99      }
100      pre .deletion {
101        background: #fdd
102      }
103      pre .addition {
104        background: #dfd
105      }
106      pre .diff .change {
107        background: #0086b3
108      }
109      pre .chunk {
110        color: #aaa
111      }
112    </style>
113  </head>
114  <body>  
115    <h1 id="html5-placeholder-polyfill">HTML5 placeholder Polyfill</h1>
116<p>Lightweight and very robust little jQuery plugin that generates the look and feel of the HTML5 placeholder attribute for browsers without native support. It also adds an extra title in case the placeholder text is too long to be displayed. 
117The polyfill comes with an option to define if the placeholder text should be read to screenreaders or not (on by default). New in version 1.9 is the option to make it behave like Chrome or mobile Safari (hide placeholder when the users enters content rather than when the fields receives focus).</p>
118<h2 id="demos-">Demos:</h2>
119<p><strong>To see the actual work of this polyfill use an old browser like Firefox 3.6!</strong></p>
120<ul>
121<li><strong><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/">check out the DEMO</a></strong></li>
122<li><strong><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-chromeish.html">check out the Chrome style DEMO</a></strong></li>
123<li><strong><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-modernizr.html">check out the DEMO using Modernizr to load the Polyfill</a></strong> (Thanks to Modernizr/yepnope nothing needs to get loaded when the Browser natively supports the placeholder)</li>
124</ul>
125<h2 id="dependencies-">Dependencies:</h2>
126<h3 id="required-">Required:</h3>
127<ul>
128<li><a href="http://jquery.com/">jQuery</a> (tested with 1.6.2 but might as well work with older versions)</li>
129</ul>
130<h3 id="optional-but-recommended-">Optional but recommended:</h3>
131<ul>
132<li><p><a href="http://www.modernizr.com/">Modernizr</a> (tested with 2.0.6) OR <a href="http://yepnopejs.com/">yepnope.js</a></p>
133<ul>
134<li>yepnope.js is included with Modernizr by default. Just make sure the setting in the Extras-Block: &quot;Modernizr.load (yepnope.js)&quot; is checked on the <a href="http://modernizr.com/download/">Modernizr Download Page</a></li>
135</ul>
136</li>
137<li><p><a href="https://github.com/johnantoni/jquery.onfontresize">fontresize</a> (excellent even though terribly unmaintained event plugin that fires when a user changes the font size of their browser (that usually breaks the other placeholder polyfills))</p>
138</li>
139</ul>
140<h3 id="optional">Optional</h3>
141<h4 id="required-if-hiding-the-placeholder-when-user-types-instead-of-onfocus-like-chrome-or-mobile-safari-hideonfocus-false-">Required if hiding the placeholder when user types instead of onfocus (like Chrome or mobile Safari) {hideOnFocus : false}</h4>
142<ul>
143<li><a href="https://gist.github.com/1579671">requestAnimationFrame polyfill</a> better than a simple timeout loop as browsers can slow the loop down when it&#39;s not the active window</li>
144</ul>
145<h3 id="highly-optional">Highly optional</h3>
146<h4 id="only-needed-if-you-want-users-to-be-able-to-resize-textareas-">only needed if you want users to be able to resize textareas:</h4>
147<ul>
148<li><a href="https://github.com/cowboy/jquery-resize">jquery-resize</a> if included a repositioning is triggered when a user resizes a textarea. If not I disable the resizing of textareas to avoid rendering problems</li>
149</ul>
150<h2 id="browser-support">Browser Support</h2>
151<p>The placeholder attribute has decent support across current Browsers. This script adds support for the older generations including:</p>
152<ul>
153<li>Internet Explorer &lt; 10</li>
154<li>Firefox &lt; 4.0</li>
155<li>Safari &lt; 4.0</li>
156<li>iOS Safari &lt; 4.0</li>
157<li>Android Browser &lt; 2.0</li>
158</ul>
159<p>For more details on native support see the browser suppport table at <a href="http://caniuse.com/#search=placeholder">caniuse.com</a>.</p>
160<h2 id="installation">Installation</h2>
161<p>You can install HTML5 placeholder Polyfill by using <a href="http://bower.io">Bower</a>.</p>
162<pre><code class="lang-bash">bower install html5-placeholder-polyfill</code></pre>
163<h2 id="usage-">USAGE:</h2>
164<h3 id="simply-include-the-javascript-and-css-the-polyfill-will-only-run-when-needed-">Simply include the Javascript and CSS. The Polyfill will only run when needed.</h3>
165<pre><code>&lt;head&gt;
166    &lt;link rel=&quot;stylesheet&quot; href=&quot;placeholder_polyfill.min.css&quot;&gt;
167    &lt;script src=&quot;placeholder_polyfill.jquery.min.combo.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
168&lt;/head&gt;</code></pre>
169<p>Please bear in mind that every input needs a linked label in order for the plugin to work.</p>
170<h3 id="using-modernizr-http-www-modernizr-com-modern-browser-don-t-even-have-to-load-the-polyfill-at-all-">Using <a href="http://www.modernizr.com/">Modernizr</a>, modern browser don&#39;t even have to load the polyfill at all.</h3>
171<pre><code>&lt;script&gt;
172Modernizr.load({
173    test: Modernizr.input.placeholder,
174    nope: [
175            &#39;placeholder_polyfill.min.css&#39;,
176            &#39;placeholder_polyfill.jquery.min.combo.js&#39;
177          ]
178});
179&lt;/script&gt;</code></pre>
180<h3 id="using-yepnope-js-http-yepnopejs-com-used-as-load-in-modernizr-the-same-as-with-modernizr-but-with-manual-feature-detection-">Using <a href="http://yepnopejs.com/">yepnope.js</a> (used as load() in Modernizr), the same as with Modernizr, but with manual feature detection.</h3>
181<pre><code>&lt;script&gt;
182yepnope({
183    test: (&#39;placeholder&#39; in $(&#39;&lt;input&gt;&#39;)[0]),
184    nope: [
185            &#39;placeholder_polyfill.min.css&#39;,
186            &#39;placeholder_polyfill.jquery.min.combo.js&#39;
187          ]
188});
189&lt;/script&gt;</code></pre>
190<h3 id="configuring-the-behavior-optional-">Configuring the behavior (optional)</h3>
191<pre><code>&lt;head&gt;
192    &lt;link rel=&quot;stylesheet&quot; href=&quot;placeholder_polyfill.min.css&quot;&gt;
193    &lt;script&gt;
194    placeHolderConfig = {
195        // css class that is used to style the placeholder
196            className: &#39;placeholder&#39;, 
197        // expose the placeholder text to screenreaders or not
198            visibleToScreenreaders : true,
199        // css class is used to visually hide the placeholder
200            visibleToScreenreadersHideClass : &#39;placeholder-hide-except-screenreader&#39;, 
201        // css class used to hide the placeholder for all
202            visibleToNoneHideClass : &#39;placeholder-hide&#39;,
203        // either hide the placeholder on focus or on type
204            hideOnFocus : false, 
205        // remove this class from a label (to fix hidden labels)
206            removeLabelClass : &#39;visuallyhidden&#39;, 
207        // replace the label above with this class
208            hiddenOverrideClass : &#39;visuallyhidden-with-placeholder&#39;, 
209        // allow the replace of the removeLabelClass with hiddenOverrideClass or not
210            forceHiddenOverride : true, 
211        // apply the polyfill even for browser with native support
212            forceApply : false, 
213        // init automatically or not
214            autoInit : true 
215    }
216    &lt;/script&gt; 
217    &lt;script src=&quot;placeholder_polyfill.jquery.min.combo.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
218&lt;/head&gt;    </code></pre>
219<h2 id="version-history">VERSION HISTORY</h2>
220<p><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/web/version-history.html">See the complete Version History here</a></p>
221
222  </body>
223</html>

1	`<!DOCTYPE html>`
2	`<html>`
3	`<head>`
4	`<meta charset="utf-8">`
5
6	`<title>doc</title>`
7	`<style>`
8	`/github.com style (c) Vasily Polovnyov <vast@whiteants.net>/`
9	`pre code {`
10	`display: block; padding: 0.5em;`
11	`color: #333;`
12	`background: #f8f8ff`
13	`}`
14	`pre .comment,`
15	`pre .template_comment,`
16	`pre .diff .header,`
17	`pre .javadoc {`
18	`color: #998;`
19	`font-style: italic`
20	`}`
21	`pre .keyword,`
22	`pre .css .rule .keyword,`
23	`pre .winutils,`
24	`pre .javascript .title,`
25	`pre .nginx .title,`
26	`pre .subst,`
27	`pre .request,`
28	`pre .status {`
29	`color: #333;`
30	`font-weight: bold`
31	`}`
32	`pre .number,`
33	`pre .hexcolor,`
34	`pre .ruby .constant {`
35	`color: #099;`
36	`}`
37	`pre .string,`
38	`pre .tag .value,`
39	`pre .phpdoc,`
40	`pre .tex .formula {`
41	`color: #d14`
42	`}`
43	`pre .title,`
44	`pre .id {`
45	`color: #900;`
46	`font-weight: bold`
47	`}`
48	`pre .javascript .title,`
49	`pre .lisp .title,`
50	`pre .clojure .title,`
51	`pre .subst {`
52	`font-weight: normal`
53	`}`
54	`pre .class .title,`
55	`pre .haskell .type,`
56	`pre .vhdl .literal,`
57	`pre .tex .command {`
58	`color: #458;`
59	`font-weight: bold`
60	`}`
61	`pre .tag,`
62	`pre .tag .title,`
63	`pre .rules .property,`
64	`pre .django .tag .keyword {`
65	`color: #000080;`
66	`font-weight: normal`
67	`}`
68	`pre .attribute,`
69	`pre .variable,`
70	`pre .lisp .body {`
71	`color: #008080`
72	`}`
73	`pre .regexp {`
74	`color: #009926`
75	`}`
76	`pre .class {`
77	`color: #458;`
78	`font-weight: bold`
79	`}`
80	`pre .symbol,`
81	`pre .ruby .symbol .string,`
82	`pre .lisp .keyword,`
83	`pre .tex .special,`
84	`pre .prompt {`
85	`color: #990073`
86	`}`
87	`pre .built_in,`
88	`pre .lisp .title,`
89	`pre .clojure .built_in {`
90	`color: #0086b3`
91	`}`
92	`pre .preprocessor,`
93	`pre .pi,`
94	`pre .doctype,`
95	`pre .shebang,`
96	`pre .cdata {`
97	`color: #999;`
98	`font-weight: bold`
99	`}`
100	`pre .deletion {`
101	`background: #fdd`
102	`}`
103	`pre .addition {`
104	`background: #dfd`
105	`}`
106	`pre .diff .change {`
107	`background: #0086b3`
108	`}`
109	`pre .chunk {`
110	`color: #aaa`
111	`}`
112	`</style>`
113	`</head>`
114	`<body>`
115	`<h1 id="html5-placeholder-polyfill">HTML5 placeholder Polyfill</h1>`
116	`<p>Lightweight and very robust little jQuery plugin that generates the look and feel of the HTML5 placeholder attribute for browsers without native support. It also adds an extra title in case the placeholder text is too long to be displayed.`
117	`The polyfill comes with an option to define if the placeholder text should be read to screenreaders or not (on by default). New in version 1.9 is the option to make it behave like Chrome or mobile Safari (hide placeholder when the users enters content rather than when the fields receives focus).</p>`
118	`<h2 id="demos-">Demos:</h2>`
119	`<p><strong>To see the actual work of this polyfill use an old browser like Firefox 3.6!</strong></p>`
120	`<ul>`
121	`<li><strong><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/">check out the DEMO</a></strong></li>`
122	`<li><strong><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-chromeish.html">check out the Chrome style DEMO</a></strong></li>`
123	`<li><strong><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-modernizr.html">check out the DEMO using Modernizr to load the Polyfill</a></strong> (Thanks to Modernizr/yepnope nothing needs to get loaded when the Browser natively supports the placeholder)</li>`
124	`</ul>`
125	`<h2 id="dependencies-">Dependencies:</h2>`
126	`<h3 id="required-">Required:</h3>`
127	`<ul>`
128	`<li><a href="http://jquery.com/">jQuery</a> (tested with 1.6.2 but might as well work with older versions)</li>`
129	`</ul>`
130	`<h3 id="optional-but-recommended-">Optional but recommended:</h3>`
131	`<ul>`
132	`<li><p><a href="http://www.modernizr.com/">Modernizr</a> (tested with 2.0.6) OR <a href="http://yepnopejs.com/">yepnope.js</a></p>`
133	`<ul>`
134	`<li>yepnope.js is included with Modernizr by default. Just make sure the setting in the Extras-Block: "Modernizr.load (yepnope.js)" is checked on the <a href="http://modernizr.com/download/">Modernizr Download Page</a></li>`
135	`</ul>`
136	`</li>`
137	`<li><p><a href="https://github.com/johnantoni/jquery.onfontresize">fontresize</a> (excellent even though terribly unmaintained event plugin that fires when a user changes the font size of their browser (that usually breaks the other placeholder polyfills))</p>`
138	`</li>`
139	`</ul>`
140	`<h3 id="optional">Optional</h3>`
141	`<h4 id="required-if-hiding-the-placeholder-when-user-types-instead-of-onfocus-like-chrome-or-mobile-safari-hideonfocus-false-">Required if hiding the placeholder when user types instead of onfocus (like Chrome or mobile Safari) {hideOnFocus : false}</h4>`
142	`<ul>`
143	`<li><a href="https://gist.github.com/1579671">requestAnimationFrame polyfill</a> better than a simple timeout loop as browsers can slow the loop down when it's not the active window</li>`
144	`</ul>`
145	`<h3 id="highly-optional">Highly optional</h3>`
146	`<h4 id="only-needed-if-you-want-users-to-be-able-to-resize-textareas-">only needed if you want users to be able to resize textareas:</h4>`
147	`<ul>`
148	`<li><a href="https://github.com/cowboy/jquery-resize">jquery-resize</a> if included a repositioning is triggered when a user resizes a textarea. If not I disable the resizing of textareas to avoid rendering problems</li>`
149	`</ul>`
150	`<h2 id="browser-support">Browser Support</h2>`
151	`<p>The placeholder attribute has decent support across current Browsers. This script adds support for the older generations including:</p>`
152	`<ul>`
153	`<li>Internet Explorer < 10</li>`
154	`<li>Firefox < 4.0</li>`
155	`<li>Safari < 4.0</li>`
156	`<li>iOS Safari < 4.0</li>`
157	`<li>Android Browser < 2.0</li>`
158	`</ul>`
159	`<p>For more details on native support see the browser suppport table at <a href="http://caniuse.com/#search=placeholder">caniuse.com</a>.</p>`
160	`<h2 id="installation">Installation</h2>`
161	`<p>You can install HTML5 placeholder Polyfill by using <a href="http://bower.io">Bower</a>.</p>`
162	`<pre><code class="lang-bash">bower install html5-placeholder-polyfill</code></pre>`
163	`<h2 id="usage-">USAGE:</h2>`
164	`<h3 id="simply-include-the-javascript-and-css-the-polyfill-will-only-run-when-needed-">Simply include the Javascript and CSS. The Polyfill will only run when needed.</h3>`
165	`<pre><code><head>`
166	`<link rel="stylesheet" href="placeholder_polyfill.min.css">`
167	`<script src="placeholder_polyfill.jquery.min.combo.js" charset="utf-8"></script>`
168	`</head></code></pre>`
169	`<p>Please bear in mind that every input needs a linked label in order for the plugin to work.</p>`
170	`<h3 id="using-modernizr-http-www-modernizr-com-modern-browser-don-t-even-have-to-load-the-polyfill-at-all-">Using <a href="http://www.modernizr.com/">Modernizr</a>, modern browser don't even have to load the polyfill at all.</h3>`
171	`<pre><code><script>`
172	`Modernizr.load({`
173	`test: Modernizr.input.placeholder,`
174	`nope: [`
175	`'placeholder_polyfill.min.css',`
176	`'placeholder_polyfill.jquery.min.combo.js'`
177	`]`
178	`});`
179	`</script></code></pre>`
180	`<h3 id="using-yepnope-js-http-yepnopejs-com-used-as-load-in-modernizr-the-same-as-with-modernizr-but-with-manual-feature-detection-">Using <a href="http://yepnopejs.com/">yepnope.js</a> (used as load() in Modernizr), the same as with Modernizr, but with manual feature detection.</h3>`
181	`<pre><code><script>`
182	`yepnope({`
183	`test: ('placeholder' in $('<input>')[0]),`
184	`nope: [`
185	`'placeholder_polyfill.min.css',`
186	`'placeholder_polyfill.jquery.min.combo.js'`
187	`]`
188	`});`
189	`</script></code></pre>`
190	`<h3 id="configuring-the-behavior-optional-">Configuring the behavior (optional)</h3>`
191	`<pre><code><head>`
192	`<link rel="stylesheet" href="placeholder_polyfill.min.css">`
193	`<script>`
194	`placeHolderConfig = {`
195	`// css class that is used to style the placeholder`
196	`className: 'placeholder',`
197	`// expose the placeholder text to screenreaders or not`
198	`visibleToScreenreaders : true,`
199	`// css class is used to visually hide the placeholder`
200	`visibleToScreenreadersHideClass : 'placeholder-hide-except-screenreader',`
201	`// css class used to hide the placeholder for all`
202	`visibleToNoneHideClass : 'placeholder-hide',`
203	`// either hide the placeholder on focus or on type`
204	`hideOnFocus : false,`
205	`// remove this class from a label (to fix hidden labels)`
206	`removeLabelClass : 'visuallyhidden',`
207	`// replace the label above with this class`
208	`hiddenOverrideClass : 'visuallyhidden-with-placeholder',`
209	`// allow the replace of the removeLabelClass with hiddenOverrideClass or not`
210	`forceHiddenOverride : true,`
211	`// apply the polyfill even for browser with native support`
212	`forceApply : false,`
213	`// init automatically or not`
214	`autoInit : true`
215	`}`
216	`</script>`
217	`<script src="placeholder_polyfill.jquery.min.combo.js" charset="utf-8"></script>`
218	`</head> </code></pre>`
219	`<h2 id="version-history">VERSION HISTORY</h2>`
220	`<p><a href="http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/web/version-history.html">See the complete Version History here</a></p>`
221
222	`</body>`
223	`</html>`