Update the demo so it shows that <label> elements will now work prope…

…rly for password inputs in browsers that require an extra input field to fake the placeholder.
Asterodeia · Feb 23, 2011 · ece35eb · ece35eb
1 parent 4020aba
commit ece35eb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -30,8 +30,14 @@ The plugin automatically adds `class="placeholder"` to the elements who are curr
 ## Notes
 
 * Works in all A-grade browsers, including IE6.
-* The plugin 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.)
-* The plugin will cache the results of its two feature tests in `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.placeholder`. 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.
+* 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.)
+* Caches the results of its two feature tests in `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.placeholder`. 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.
+* 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:
+
+        <label for="bar">Example label</label>
+        <input type="password" placeholder="foo" id="bar">
+
+    And the `<label>` will always point to the `<input>` element you’d expect. Also, all CSS styles based on the ID will just work™.
 
 ## License
 

diff --git a/demo.html b/demo.html
@@ -11,6 +11,7 @@
    textarea { height: 5em; width: 20em; }
    .placeholder { color: #aaa; }
    .note { border: 1px solid orange; padding: 1em; background: #ffffe0; }
+    /* #p { background: lime; } */
   </style>
  </head>
  <body>
@@ -23,7 +24,7 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
    <p><label><code>type=email</code> <input type="email" name="email" placeholder="e.g. [email protected]"></label></p>
    <p><label><code>type=url</code> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"></label></p>
    <p><label><code>type=tel</code> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"></label></p>
-   <p><label><code>type=password</code> <input type="password" name="password" placeholder="e.g. hunter2" id="p" class="x"></label></p>
+   <p><label for="p"><code>type=password</code> </label><input type="password" name="password" placeholder="e.g. hunter2" id="p"></p>
    <p><label><code>textarea</code> <textarea name="message" placeholder="Your message goes here"></textarea></label></p>
    <p><input type="submit" value="type=submit"></p>
   </form>
@@ -33,7 +34,7 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
   <script>
    // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
    // jQuery.fn.hide = function() { return this; }
-   // Then add an @id to the password input and apply some styles to it.
+   // Then uncomment the last rule in the <style> element (in the <head>).
    $(function() {
     // Invoke the plugin
     $('input, textarea').placeholder();