UNPKG

5.62 kBMarkdownView Raw
1HTML5 placeholder Polyfill
2==========================
3
4Lightweight 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.
5The 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).
6
7Demos:
8------
9__To see the actual work of this polyfill use an old browser like Firefox 3.6!__
10
11* __[check out the DEMO](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/)__
12* __[check out the Chrome style DEMO](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-chromeish.html)__
13* __[check out the DEMO using Modernizr to load the Polyfill](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-modernizr.html)__ (Thanks to Modernizr/yepnope nothing needs to get loaded when the Browser natively supports the placeholder)
14
15
16Dependencies:
17-------------
18
19### Required:
20
21* [jQuery](http://jquery.com/) (tested with 1.6.2 but might as well work with older versions)
22
23### Optional but recommended:
24
25* [Modernizr](http://www.modernizr.com/) (tested with 2.0.6) OR [yepnope.js](http://yepnopejs.com/)
26 * 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 [Modernizr Download Page](http://modernizr.com/download/)
27
28* [fontresize](https://github.com/johnantoni/jquery.onfontresize) (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))
29
30### Optional
31
32#### Required if hiding the placeholder when user types instead of onfocus (like Chrome or mobile Safari) {hideOnFocus : false}
33
34* [requestAnimationFrame polyfill](https://gist.github.com/1579671) better than a simple timeout loop as browsers can slow the loop down when it's not the active window
35
36### Highly optional
37
38#### only needed if you want users to be able to resize textareas:
39
40* [jquery-resize](https://github.com/cowboy/jquery-resize) if included a repositioning is triggered when a user resizes a textarea. If not I disable the resizing of textareas to avoid rendering problems
41
42
43Browser Support
44---------------
45
46The placeholder attribute has decent support across current Browsers. This script adds support for the older generations including:
47
48* Internet Explorer < 10
49* Firefox < 4.0
50* Safari < 4.0
51* iOS Safari < 4.0
52* Android Browser < 2.0
53
54For more details on native support see the browser suppport table at [caniuse.com](http://caniuse.com/#search=placeholder).
55
56Installation
57------------
58
59You can install HTML5 placeholder Polyfill by using [Bower](http://bower.io).
60
61```bash
62bower install html5-placeholder-polyfill
63```
64
65USAGE:
66------
67
68### Simply include the Javascript and CSS. The Polyfill will only run when needed.
69
70 <head>
71 <link rel="stylesheet" href="placeholder_polyfill.min.css">
72 <script src="placeholder_polyfill.jquery.min.combo.js" charset="utf-8"></script>
73 </head>
74
75Please bear in mind that every input needs a linked label in order for the plugin to work.
76
77### Using [Modernizr](http://www.modernizr.com/), modern browser don't even have to load the polyfill at all.
78
79 <script>
80 Modernizr.load({
81 test: Modernizr.input.placeholder,
82 nope: [
83 'placeholder_polyfill.min.css',
84 'placeholder_polyfill.jquery.min.combo.js'
85 ]
86 });
87 </script>
88
89### Using [yepnope.js](http://yepnopejs.com/) (used as load() in Modernizr), the same as with Modernizr, but with manual feature detection.
90
91 <script>
92 yepnope({
93 test: ('placeholder' in $('<input>')[0]),
94 nope: [
95 'placeholder_polyfill.min.css',
96 'placeholder_polyfill.jquery.min.combo.js'
97 ]
98 });
99 </script>
100
101### Configuring the behavior (optional)
102
103 <head>
104 <link rel="stylesheet" href="placeholder_polyfill.min.css">
105 <script>
106 placeHolderConfig = {
107 // css class that is used to style the placeholder
108 className: 'placeholder',
109 // expose the placeholder text to screenreaders or not
110 visibleToScreenreaders : true,
111 // css class is used to visually hide the placeholder
112 visibleToScreenreadersHideClass : 'placeholder-hide-except-screenreader',
113 // css class used to hide the placeholder for all
114 visibleToNoneHideClass : 'placeholder-hide',
115 // either hide the placeholder on focus or on type
116 hideOnFocus : false,
117 // remove this class from a label (to fix hidden labels)
118 removeLabelClass : 'visuallyhidden',
119 // replace the label above with this class
120 hiddenOverrideClass : 'visuallyhidden-with-placeholder',
121 // allow the replace of the removeLabelClass with hiddenOverrideClass or not
122 forceHiddenOverride : true,
123 // apply the polyfill even for browser with native support
124 forceApply : false,
125 // init automatically or not
126 autoInit : true
127 }
128 </script>
129 <script src="placeholder_polyfill.jquery.min.combo.js" charset="utf-8"></script>
130 </head>
131
132VERSION HISTORY
133---------------
134
135[See the complete Version History here](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/web/version-history.html)