Skip to content
Browse files

Handle browsers that support @placeholder for <input> but not for <te…

…xtarea> (like Safari 4) correctly.
  • Loading branch information...
1 parent dcd9393 commit b9e03c0cebbb67af869d1d89bcd06142f6bdeeaa @mathiasbynens committed Nov 3, 2010
Showing with 26 additions and 19 deletions.
  1. +2 −4 README.md
  2. +11 −3 demo.html
  3. +11 −10 jquery.placeholder.js
  4. +2 −2 jquery.placeholder.min.js
View
6 README.md
@@ -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)
@@ -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/)_
View
14 demo.html
@@ -36,9 +36,17 @@
$('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>
View
21 jquery.placeholder.js
@@ -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) {
@@ -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);
View
4 jquery.placeholder.min.js
@@ -1,6 +1,6 @@
/*!
- * 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(d){if('placeholder' in document.createElement('input')){d.fn.placeholder=function(){return this};return}function b(f){var e={},g=/^jQuery\d+$/;d.each(f.attributes,function(j,h){if(!g.test(h.name)){e[h.name]=h.value}});return e}function a(){var e=d(this);if(e.val()===e.attr('placeholder')&&e.hasClass('placeholder')){if(e.data('placeholder-password')){e.hide().next().show().focus()}else{e.val('').removeClass('placeholder')}}}function c(f){var i,h=d(this);if(h.val()===''||h.val()===h.attr('placeholder')){if(h.is(':password')){if(!h.data('placeholder-textinput')){try{i=h.clone().attr({type:'text'})}catch(g){i=d('<input>').attr(d.extend(b(h[0]),{type:'text'}))}i.removeAttr('name').data('placeholder-password',true).bind('focus.placeholder',a);h.data('placeholder-textinput',i).before(i)}h=h.hide().prev().show()}h.addClass('placeholder').val(h.attr('placeholder'))}else{h.removeClass('placeholder')}}d(function(){d('form').bind('submit.placeholder',function(){var e=d('.placeholder',this).each(a);setTimeout(function(){e.each(c)},10)})});d(window).bind('unload.placeholder',function(){d('.placeholder').val('')});d.fn.placeholder=function(){return this.filter(':input[placeholder]').bind('focus.placeholder',a).bind('blur.placeholder',c).trigger('blur.placeholder').end()}})(jQuery);
+(function(f,z){var e=z in document.createElement('input'),a=z in document.createElement('textarea');if(e&&a){f.fn.placeholder=function(){return this}}else{f.fn.placeholder=function(){return this.filter((e?'textarea':':input')+'['+z+']').bind('focus.'+z,b).bind('blur.'+z,d).trigger('blur.'+z).end()}}function c(h){var g={},i=/^jQuery\d+$/;f.each(h.attributes,function(k,j){if(!i.test(j.name)){g[j.name]=j.value}});return g}function b(){var g=f(this);if(g.val()===g.attr(z)&&g.hasClass(z)){if(g.data(z+'-password')){g.hide().next().show().focus()}else{g.val('').removeClass(z)}}}function d(g){var j,i=f(this);if(i.val()===''||i.val()===i.attr(z)){if(i.is(':password')){if(!i.data(z+'-textinput')){try{j=i.clone().attr({type:'text'})}catch(h){j=f('<input>').attr(f.extend(c(i[0]),{type:'text'}))}j.removeAttr('name').data(z+'-password',true).bind('focus.'+z,b);i.data(z+'-textinput',j).before(j)}i=i.hide().prev().show()}i.addClass(z).val(i.attr(z))}else{i.removeClass(z)}}f(function(){f('form').bind('submit.'+z,function(){var g=f('.'+z,this).each(b);setTimeout(function(){g.each(d)},10)})});f(window).bind('unload.'+z,function(){f('.'+z).val('')})})(jQuery,'placeholder');

0 comments on commit b9e03c0

Please sign in to comment.
Something went wrong with that request. Please try again.