Skip to content

Commit

Permalink
Handle browsers that support @Placeholder for <input> but not for <te…
Browse files Browse the repository at this point in the history
…xtarea> (like Safari 4) correctly.
  • Loading branch information
mathiasbynens committed Nov 3, 2010
1 parent dcd9393 commit b9e03c0
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 19 deletions.
6 changes: 2 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# HTML5 Placeholder jQuery Plugin

This plugin was based on a code snippet by [Paul Irish](http://paulirish.com/), featured in [jQuery 1.4 Hawtness #1](http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish). I added some functionality, did some optimizations here and there, and made a plugin out of it.

## Demo & Examples

[http://mathiasbynens.be/demo/placeholder](http://mathiasbynens.be/demo/placeholder)
Expand Down Expand Up @@ -32,10 +30,10 @@ 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 supports the HTML5 placeholder attribute for inputs natively. If this is the case, the plugin won’t do anything.
* 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 only apply to `textarea`s. (This is the case for Safari 4.)

## Credits

Kudos to [Paul Irish](http://paulirish.com/) for his snippet and everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips and ideas.
Kudos to [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) and everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips, ideas and patches.

_[Mathias](http://mathiasbynens.be/)_
14 changes: 11 additions & 3 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,17 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
$('input, textarea').placeholder();
// That’s it, really.
// Now display a message if the browser supports placeholder natively
if ('placeholder' in document.createElement('input')) {
$('<p class="note"><strong>Your current browser supports <code>placeholder</code> natively.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)</p>').insertAfter('form');
};
var isInputSupported = 'placeholder' in document.createElement('input'),
isTextareaSupported = 'placeholder' in document.createElement('textarea'),
html;
if (isInputSupported && isTextareaSupported) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
} else if (isInputSupported) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
}
if (html) {
$('<p class="note">' + html + '</p>').insertAfter('form');
}
});
</script>
</body>
Expand Down
21 changes: 11 additions & 10 deletions jquery.placeholder.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
/*!
* HTML5 Placeholder jQuery Plugin v1.6
* HTML5 Placeholder jQuery Plugin v1.7
* @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin
* @author Mathias Bynens <http://mathiasbynens.be/>
*/
;(function($) {

if ('placeholder' in document.createElement('input')) {
var isInputSupported = 'placeholder' in document.createElement('input'),
isTextareaSupported = 'placeholder' in document.createElement('textarea');
if (isInputSupported && isTextareaSupported) {
$.fn.placeholder = function() {
return this;
};
return;
} else {
$.fn.placeholder = function() {
return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.bind('focus.placeholder', clearPlaceholder)
.bind('blur.placeholder', setPlaceholder)
.trigger('blur.placeholder').end();
};
}

function args(elem) {
Expand Down Expand Up @@ -78,11 +86,4 @@
$('.placeholder').val('');
});

$.fn.placeholder = function() {
return this.filter(':input[placeholder]')
.bind('focus.placeholder', clearPlaceholder)
.bind('blur.placeholder' , setPlaceholder)
.trigger('blur.placeholder').end();
};

})(jQuery);
4 changes: 2 additions & 2 deletions jquery.placeholder.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b9e03c0

Please sign in to comment.