Skip to content

Commit 2c56bad

Browse files
committed
Update file: jquery-placeholder-by-mathiasbynens.html
1 parent 907d8ab commit 2c56bad

File tree

1 file changed

+54
-95
lines changed

1 file changed

+54
-95
lines changed

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

Lines changed: 54 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -174,105 +174,64 @@ <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-
# 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-
177+
<h1>HTML5 Placeholder jQuery Plugin</h1>
178+
<h2>Demo &amp; Examples</h2>
179+
<p><a href="https://mathiasbynens.github.io/jquery-placeholder/">https://mathiasbynens.github.io/jquery-placeholder/</a></p>
180+
<h2>Example Usage</h2>
181+
<h3>HTML</h3>
182+
<pre class="prettyprint linenums lang-language"><code>&lt;input type="text" name="name" placeholder="e.g. John Doe"&gt;
183+
&lt;input type="email" name="email" placeholder="e.g. address@example.ext"&gt;
184+
&lt;input type="url" name="url" placeholder="e.g. https://mathiasbynens.be/"&gt;
185+
&lt;input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"&gt;
186+
&lt;input type="password" name="password" placeholder="e.g. h4x0rpr00fz"&gt;
187+
&lt;input type="search" name="search" placeholder="Search this site…"&gt;
188+
&lt;textarea name="message" placeholder="Your message goes here"&gt;&lt;/textarea&gt;</code></pre>
189+
<h3>jQuery</h3>
190+
<p>Use the plugin as follows:</p>
191+
<pre class="prettyprint linenums lang-language"><code>$('input, textarea').placeholder();</code></pre>
192+
<p>By default, <code>.placeholder</code> css class will be added. You can override default by passing the <code>customClass</code> option:</p>
193+
<pre class="prettyprint linenums lang-language"><code>$('input, textarea').placeholder({ customClass: 'my-placeholder' });</code></pre>
194+
<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>
197+
<pre class="prettyprint linenums lang-language"><code>input, textarea { color: #000; }
198+
.placeholder { color: #aaa; }</code></pre>
199+
<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 <a href="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 <a href="http://bower.io/">Bower</a>.</p>
202+
<pre class="prettyprint linenums lang-language"><code>bower install jquery-placeholder</code></pre>
203+
<p>Or you can install it through <a href="https://www.npmjs.com/">npm</a>:</p>
204+
<pre><code>npm install --save jquery-placeholder</code></pre>
205+
<p>Contributors should install the »dev dependencies« after forking and cloning via <a href="https://www.npmjs.com/">npm</a>.</p>
206+
<pre class="prettyprint linenums lang-language"><code>npm install</code></pre>
207+
<h2>Notes</h2>
208+
<ul>
209+
<li>Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see <a href="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>&lt;input type="reset" /&gt;</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>
216+
<pre class="prettyprint linenums lang-language"><code>&lt;label for="bar"&gt;Example label&lt;/label&gt;
217+
&lt;input type="password" placeholder="foo" id="bar"&gt;</code></pre>
218+
<p>And the <code>&lt;label&gt;</code> will always point to the <code>&lt;input&gt;</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 <a href="http://mths.be/mit">the MIT license</a>.</p>
223+
<h2>Thanks to…</h2>
224+
<ul>
225+
<li><a href="http://paulirish.com/">Paul Irish</a> for his inspiring snippet in <a href="http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish">jQuery 1.4 Hawtness #1</a></li>
226+
<li>everyone from <a href="http://webchat.freenode.net/?channels=jquery">#jquery</a> for the tips, ideas and patches</li>
227+
<li>anyone who <a href="https://github.com/mathiasbynens/jquery-placeholder/contributors">contributed a patch</a> or <a href="https://github.com/mathiasbynens/jquery-placeholder/issues">made a helpful suggestion</a></li>
228+
</ul>
229+
<p><em><a href="http://mathiasbynens.be/">Mathias</a></em></p>
271230
</div>
272231

273232
<div class="tab-pane fade" id="changelog" role="tabpanel" aria-labelledby="changelog-tab">
274233
<ul id="changelogList">
275-
{"message":"Not Found","documentation_url":"https://docs.github.com/rest/repos/contents#get-repository-content","status":"404"}
234+
<p>{&quot;message&quot;:&quot;Not Found&quot;,&quot;documentation_url&quot;:&quot;<a href="https://docs.github.com/rest/repos/contents#get-repository-content&quot;,&quot;status&quot;:&quot;404">https://docs.github.com/rest/repos/contents#get-repository-content","status":"404</a>&quot;}</p>
276235
</ul>
277236
</div>
278237

0 commit comments

Comments
 (0)