From b7a4199af079ae0210dca5db36d3fe64b9508ff4 Mon Sep 17 00:00:00 2001 From: Mathias Bynens Date: Fri, 10 Feb 2012 13:39:04 +0100 Subject: [PATCH] Make `.val()` work as expected MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Use `jQuery.valHooks` to make sure `.val()` and `.val(value)` work as expected. Avoid using `.val()` internally. This fixes #30. * Tweak the syntax a bit here and there now that we’ve dropped support for pre-1.6 jQueries. --- README.md | 16 +++++--- demo.html | 4 +- jquery.placeholder.js | 79 ++++++++++++++++++++++++++++++--------- jquery.placeholder.min.js | 4 +- 4 files changed, 76 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 43fbb3b..9a85872 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ ### HTML -``` html +```html @@ -20,28 +20,34 @@ ### jQuery -``` js +Use the plugin as follows: + +```js $('input, textarea').placeholder(); ``` +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. + ### CSS 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: -``` css +```css input, textarea { color: #000; } .placeholder { color: #aaa; } ``` +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). + ## Notes -* Requires jQuery 1.4.2+. +* 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). * Works in all A-grade browsers, including IE6. * 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.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. * 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: - ``` html + ```html ``` diff --git a/demo.html b/demo.html index 7c17df8..bb5eedc 100644 --- a/demo.html +++ b/demo.html @@ -29,11 +29,11 @@

HTML5 Placeholder jQuery Plugin

— Mathias

- +