Skip to content

Commit 846abf2

Browse files
committed
Update file: jquery-placeholder-by-mathiasbynens.html
1 parent 42ade6e commit 846abf2

File tree

1 file changed

+95
-2
lines changed

1 file changed

+95
-2
lines changed

jquery-plugins/jquery-placeholder-by-mathiasbynens.html

Lines changed: 95 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,12 +174,105 @@ <h1 id="packageName">Jquery Placeholder</h1>
174174
</div>
175175
<div class="tab-content mt-3" id="infoTabsContent">
176176
<div class="tab-pane fade show active" id="installation" role="tabpanel" aria-labelledby="installation-tab">
177-
No README available
177+
# HTML5 Placeholder jQuery Plugin
178+
179+
## Demo & Examples
180+
181+
<https://mathiasbynens.github.io/jquery-placeholder/>
182+
183+
## Example Usage
184+
185+
### HTML
186+
187+
```html
188+
<input type="text" name="name" placeholder="e.g. John Doe">
189+
<input type="email" name="email" placeholder="e.g. address@example.ext">
190+
<input type="url" name="url" placeholder="e.g. https://mathiasbynens.be/">
191+
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
192+
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
193+
<input type="search" name="search" placeholder="Search this site…">
194+
<textarea name="message" placeholder="Your message goes here"></textarea>
195+
```
196+
197+
### jQuery
198+
199+
Use the plugin as follows:
200+
201+
```js
202+
$('input, textarea').placeholder();
203+
```
204+
205+
By default, `.placeholder` css class will be added. You can override default by passing the `customClass` option:
206+
```js
207+
$('input, textarea').placeholder({ customClass: 'my-placeholder' });
208+
```
209+
210+
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 `<input type="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+
<label for="bar">Example label</label>
254+
<input type="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)
268+
269+
_– [Mathias](http://mathiasbynens.be/)_
270+
178271
</div>
179272

180273
<div class="tab-pane fade" id="changelog" role="tabpanel" aria-labelledby="changelog-tab">
181274
<ul id="changelogList">
182-
No changelog available.
275+
{"message":"Not Found","documentation_url":"https://docs.github.com/rest/repos/contents#get-repository-content","status":"404"}
183276
</ul>
184277
</div>
185278

0 commit comments

Comments
 (0)