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

…xtarea> (like Safari 4) correctly.

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/)_

demo.html

@@ -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>

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);