Added custom css class support

amerikan · amerikan · commit b3c33a6e7c01 · 2014-12-22T23:18:12.000-08:00
diff --git a/README.md b/README.md
@@ -26,6 +26,11 @@ Use the plugin as follows:
 $('input, textarea').placeholder();
 ```
 
+By default, `.placeholder` css class will be added. You can override default by passing the `customClass` option:
+```js
+$('input, textarea').placeholder({customClass: 'my-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 in 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
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 			label code { cursor: pointer; float: left; width: 150px; }
 			input { width: 14em; }
 			textarea { height: 5em; width: 20em; }
-			.placeholder { color: #aaa; }
+			.my-placeholder { color: #aaa; }
 			.note { border: 1px solid orange; padding: 1em; background: #ffffe0; }
 			/* #p { background: lime; } */
 		</style>
@@ -37,7 +37,7 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
 			// Then uncomment the last rule in the <style> element (in the <head>).
 			$(function() {
 				// Invoke the plugin
-				$('input, textarea').placeholder();
+				$('input, textarea').placeholder({customClass:'my-placeholder'});
 				// That’s it, really.
 				// Now display a message if the browser supports placeholder natively
 				var html;
diff --git a/jquery.placeholder.js b/jquery.placeholder.js
@@ -28,11 +28,17 @@
 
 	} else {
 
-		placeholder = $.fn.placeholder = function() {
+		var settings = {};
+
+		placeholder = $.fn.placeholder = function(options) {
+
+			var defaults = {customClass: 'placeholder'};
+			settings = $.extend({}, defaults, options);
+
 			var $this = this;
 			$this
 				.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
-				.not('.placeholder')
+				.not('.'+settings.customClass)
 				.bind({
 					'focus.placeholder': clearPlaceholder,
 					'blur.placeholder': setPlaceholder
@@ -74,7 +80,7 @@
 						// We can't use `triggerHandler` here because of dummy text/password inputs :(
 						setPlaceholder.call(element);
 					}
-				} else if ($element.hasClass('placeholder')) {
+				} else if ($element.hasClass(settings.customClass)) {
 					clearPlaceholder.call(element, true, value) || (element.value = value);
 				} else {
 					element.value = value;
@@ -97,7 +103,7 @@
 			// Look for forms
 			$(document).delegate('form', 'submit.placeholder', function() {
 				// Clear the placeholder values so they don't get submitted
-				var $inputs = $('.placeholder', this).each(clearPlaceholder);
+				var $inputs = $('.'+settings.customClass, this).each(clearPlaceholder);
 				setTimeout(function() {
 					$inputs.each(setPlaceholder);
 				}, 10);
@@ -106,7 +112,7 @@
 
 		// Clear placeholder values upon page reload
 		$(window).bind('beforeunload.placeholder', function() {
-			$('.placeholder').each(function() {
+			$('.'+settings.customClass).each(function() {
 				this.value = '';
 			});
 		});
@@ -128,7 +134,7 @@
 	function clearPlaceholder(event, value) {
 		var input = this;
 		var $input = $(input);
-		if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
+		if (input.value == $input.attr('placeholder') && $input.hasClass(settings.customClass)) {
 			if ($input.data('placeholder-password')) {
 				$input = $input.hide().nextAll('input[type="password"]:first').show().attr('id', $input.removeAttr('id').data('placeholder-id'));
 				// If `clearPlaceholder` was called from `$.valHooks.input.set`
@@ -138,7 +144,7 @@
 				$input.focus();
 			} else {
 				input.value = '';
-				$input.removeClass('placeholder');
+				$input.removeClass(settings.customClass);
 				input == safeActiveElement() && input.select();
 			}
 		}
@@ -174,10 +180,10 @@
 				$input = $input.removeAttr('id').hide().prevAll('input[type="text"]:first').attr('id', id).show();
 				// Note: `$input[0] != input` now!
 			}
-			$input.addClass('placeholder');
+			$input.addClass(settings.customClass);
 			$input[0].value = $input.attr('placeholder');
 		} else {
-			$input.removeClass('placeholder');
+			$input.removeClass(settings.customClass);
 		}
 	}
 
