You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 in 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.
211
-
212
-
### CSS
213
-
214
-
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:
215
-
216
-
```css
217
-
input, textarea { color: #000; }
218
-
.placeholder { color: #aaa; }
219
-
```
220
-
221
-
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](https://stackoverflow.com/a/2610741/96656).
222
-
223
-
## Installation
224
-
225
-
You can install jquery-placeholder by using [Bower](http://bower.io/).
226
-
227
-
```bash
228
-
bower install jquery-placeholder
229
-
```
230
-
231
-
Or you can install it through [npm](https://www.npmjs.com/):
232
-
233
-
```
234
-
npm install --save jquery-placeholder
235
-
```
236
-
237
-
Contributors should install the »dev dependencies« after forking and cloning via [npm](https://www.npmjs.com/).
238
-
239
-
```bash
240
-
npm install
241
-
```
242
-
243
-
## Notes
244
-
245
-
* 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/v1.8.7).
246
-
* Works in all A-grade browsers, including IE6.
247
-
* 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.)
248
-
* 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.
249
-
* Using `<inputtype="reset" />` will break the plugin functionality
250
-
* 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:
251
-
252
-
```html
253
-
<labelfor="bar">Example label</label>
254
-
<inputtype="password" placeholder="foo" id="bar">
255
-
```
256
-
257
-
And the `<label>` will always point to the `<input>` element you’d expect. Also, all CSS styles based on the ID will just work™.
258
-
259
-
## License
260
-
261
-
This plugin is available under [the MIT license](http://mths.be/mit).
262
-
263
-
## Thanks to…
264
-
265
-
* [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)
266
-
* everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips, ideas and patches
267
-
* anyone who [contributed a patch](https://github.com/mathiasbynens/jquery-placeholder/contributors) or [made a helpful suggestion](https://github.com/mathiasbynens/jquery-placeholder/issues)
<p>You’ll still be able to use <code>jQuery.val()</code> to get and set the input values. If the element is currently showing a placeholder, <code>.val()</code> will return an empty string instead of the placeholder text, just like it does in browsers with a native <code>@placeholder</code> implementation. Calling <code>.val('')</code> to set an element’s value to the empty string will result in the placeholder text (re)appearing.</p>
195
+
<h3>CSS</h3>
196
+
<p>The plugin automatically adds <code>class="placeholder"</code> to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:</p>
<p>I’d suggest sticking to the <code>#aaa</code> color for placeholder text, as it’s the default in most browsers that support <code>@placeholder</code>. If you really want to, though, you can <ahref="https://stackoverflow.com/a/2610741/96656">style the placeholder text in some of the browsers that natively support it</a>.</p>
200
+
<h2>Installation</h2>
201
+
<p>You can install jquery-placeholder by using <ahref="http://bower.io/">Bower</a>.</p>
<li>Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see <ahref="https://github.com/mathiasbynens/jquery-placeholder/tree/v1.8.7">v1.8.7</a>.</li>
210
+
<li>Works in all A-grade browsers, including IE6.</li>
211
+
<li>Automatically checks if the browser natively supports the HTML5 <code>placeholder</code> attribute for <code>input</code> and <code>textarea</code> elements. If this is the case, the plugin won’t do anything. If <code>@placeholder</code> is only supported for <code>input</code> elements, the plugin will leave those alone and apply to <code>textarea</code>s exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)</li>
212
+
<li>Caches the results of its two feature tests in <code>jQuery.fn.placeholder.input</code> and <code>jQuery.fn.placeholder.textarea</code>. For example, if <code>@placeholder</code> is natively supported for <code>input</code> elements, <code>jQuery.fn.placeholder.input</code> will be <code>true</code>. After loading the plugin, you can re-use these properties in your own code.</li>
213
+
<li>Using <code><input type="reset" /></code> will break the plugin functionality </li>
214
+
<li>
215
+
<p>Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra <code>input</code> element to fake <code>@placeholder</code> for password inputs. This means you can safely do stuff like:</p>
<p>And the <code><label></code> will always point to the <code><input></code> element you’d expect. Also, all CSS styles based on the ID will just work™.</p>
219
+
</li>
220
+
</ul>
221
+
<h2>License</h2>
222
+
<p>This plugin is available under <ahref="http://mths.be/mit">the MIT license</a>.</p>
223
+
<h2>Thanks to…</h2>
224
+
<ul>
225
+
<li><ahref="http://paulirish.com/">Paul Irish</a> for his inspiring snippet in <ahref="http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish">jQuery 1.4 Hawtness #1</a></li>
226
+
<li>everyone from <ahref="http://webchat.freenode.net/?channels=jquery">#jquery</a> for the tips, ideas and patches</li>
227
+
<li>anyone who <ahref="https://github.com/mathiasbynens/jquery-placeholder/contributors">contributed a patch</a> or <ahref="https://github.com/mathiasbynens/jquery-placeholder/issues">made a helpful suggestion</a></li>
0 commit comments