Skip to content
Newer
Older
100644 65 lines (43 sloc) 3.54 KB
b230407 @mathiasbynens Initial commit
authored
1 # HTML5 Placeholder jQuery Plugin
2
3 ## Demo & Examples
4
67dade0 @mathiasbynens
authored
5 [http://mathiasbynens.be/demo/placeholder](http://mathiasbynens.be/demo/placeholder)
b230407 @mathiasbynens Initial commit
authored
6
7 ## Example Usage
8
9 ### HTML
10
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
11 ```html
ed5be6b @mathiasbynens Add syntax highlighting to the README.
authored
12 <input type="text" name="name" placeholder="e.g. John Doe">
13 <input type="email" name="email" placeholder="e.g. address@example.ext">
14 <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">
15 <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
16 <input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
17 <input type="search" name="search" placeholder="Search this site…">
18 <textarea name="message" placeholder="Your message goes here"></textarea>
19 ```
b230407 @mathiasbynens Initial commit
authored
20
21 ### jQuery
22
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
23 Use the plugin as follows:
24
25 ```js
ed5be6b @mathiasbynens Add syntax highlighting to the README.
authored
26 $('input, textarea').placeholder();
27 ```
b230407 @mathiasbynens Initial commit
authored
28
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
29 You’ll still be able to use `jQuery#val()` to get and set the input values. If the element is currently showing a placeholder, `.val()` will return an empty string instead of the placeholder text, just like it does it browsers with a native `@placeholder` implementation. Calling `.val('')` to set an element’s value to the empty string will result in the placeholder text (re)appearing.
30
b68ab04 @mathiasbynens Added class="placeholder" to elements currently showing their placeho…
authored
31 ### CSS
32
933d050 @mathiasbynens Wrap class="placeholder" in a code block
authored
33 The plugin automatically adds `class="placeholder"` to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:
b68ab04 @mathiasbynens Added class="placeholder" to elements currently showing their placeho…
authored
34
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
35 ```css
ed5be6b @mathiasbynens Add syntax highlighting to the README.
authored
36 input, textarea { color: #000; }
37 .placeholder { color: #aaa; }
38 ```
b68ab04 @mathiasbynens Added class="placeholder" to elements currently showing their placeho…
authored
39
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
40 I’d suggest sticking to the `#aaa` color for placeholder text, as it’s the default in most browsers that support `@placeholder`. If you really want to, though, you can [style the placeholder text in some of the browsers that natively support it](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741).
41
b230407 @mathiasbynens Initial commit
authored
42 ## Notes
43
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
44 * Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see [v1.8.7](https://github.com/mathiasbynens/jquery-placeholder/tree/1.8.7).
add0684 @mathiasbynens Added cross-browser support for type=password, based on sidonath’s fork.
authored
45 * Works in all A-grade browsers, including IE6.
ece35eb @mathiasbynens Update the demo so it shows that <label> elements will now work prope…
authored
46 * Automatically checks if the browser natively supports the HTML5 `placeholder` attribute for `input` and `textarea` elements. If this is the case, the plugin won’t do anything. If `@placeholder` is only supported for `input` elements, the plugin will leave those alone and apply to `textarea`s exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)
b4fe503 @mathiasbynens Correct a typo in the README. Fixes #26.
authored
47 * Caches the results of its two feature tests in `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.textarea`. For example, if `@placeholder` is natively supported for `input` elements, `jQuery.fn.placeholder.input` will be `true`. After loading the plugin, you can re-use these properties in your own code.
ece35eb @mathiasbynens Update the demo so it shows that <label> elements will now work prope…
authored
48 * Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra `input` element to fake `@placeholder` for password inputs. This means you can safely do stuff like:
49
b7a4199 @mathiasbynens Make `.val()` work as expected
authored
50 ```html
ed5be6b @mathiasbynens Add syntax highlighting to the README.
authored
51 <label for="bar">Example label</label>
52 <input type="password" placeholder="foo" id="bar">
53 ```
ece35eb @mathiasbynens Update the demo so it shows that <label> elements will now work prope…
authored
54
55 And the `<label>` will always point to the `<input>` element you’d expect. Also, all CSS styles based on the ID will just work™.
b230407 @mathiasbynens Initial commit
authored
56
60a045c @mathiasbynens Adding GPL and MIT licenses.
authored
57 ## License
58
59 This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.
60
b230407 @mathiasbynens Initial commit
authored
61 ## Credits
62
9d25f91 @mathiasbynens Expose `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.texta…
authored
63 Kudos to [Paul Irish](http://paulirish.com/) for his inspiring snippet in [jQuery 1.4 Hawtness #1](http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish) and everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips, ideas and patches. Much ♥ to temp01 for his major contributions.
b230407 @mathiasbynens Initial commit
authored
64
65 _– [Mathias](http://mathiasbynens.be/)_
Something went wrong with that request. Please try again.