added

mathiasbynens · Nov 4, 2015 · d892478 · d892478
1 parent 3a54ca1
commit d892478
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -83,7 +83,7 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
 			<br />
 			<br />
 
-			<label for="p">Click me to focus password field</label>
+			<label for="p">Click me to focus password field up above</label>
 
 			<br />
 			<br />

diff --git a/jquery.placeholder.js b/jquery.placeholder.js
@@ -17,10 +17,17 @@
     }
 }(function($) {
 
+    /****
+     * Allows plugin behavior simulation in modern browsers for easier debugging. 
+     * When setting to true, use attribute "placeholder-x" rather than the usual "placeholder" in your inputs/textareas 
+     * i.e. <input type="text" placeholder-x="my placeholder text" />
+     */
+    var debugMode = false; 
+
     // Opera Mini v7 doesn't support placeholder although its DOM seems to indicate so
     var isOperaMini = Object.prototype.toString.call(window.operamini) === '[object OperaMini]';
-    var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini;
-    var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini;
+    var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini && !debugMode;
+    var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini && !debugMode;
     var valHooks = $.valHooks;
     var propHooks = $.propHooks;
     var hooks;
@@ -43,7 +50,7 @@
             var defaults = {customClass: 'placeholder'};
             settings = $.extend({}, defaults, options);
 
-            return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
+            return this.filter((isInputSupported ? 'textarea' : ':input') + '[' + (debugMode ? 'placeholder-x' : 'placeholder') + ']')
                 .not('.'+settings.customClass)
                 .bind({
                     'focus.placeholder': clearPlaceholder,
@@ -169,7 +176,7 @@
         var input = this;
         var $input = $(input);
 
-        if (input.value === $input.attr('placeholder') && $input.hasClass(settings.customClass)) {
+        if (input.value === $input.attr((debugMode ? 'placeholder-x' : 'placeholder')) && $input.hasClass(settings.customClass)) {
 
             input.value = '';
             $input.removeClass(settings.customClass);
@@ -255,7 +262,7 @@
             }
 
             $input.addClass(settings.customClass);
-            $input[0].value = $input.attr('placeholder');
+            $input[0].value = $input.attr((debugMode ? 'placeholder-x' : 'placeholder'));
 
         } else {
             $input.removeClass(settings.customClass);

diff --git a/simulation.html b/simulation.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>HTML5 placeholder jQuery Plugin</title>
+		<style>
+			body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
+			input, textarea { font-size: 1em; }
+			label code { display: inline-block; width: 200px; }
+			textarea { height: 2em; width: 20em;, font-family: sans-serif; }
+			form div { border-bottom: 1px solid #ccc; padding: 5px; }
+			.my-placeholder { color: #aaa; }
+			.note { border: 1px solid orange; font-size: 13px; padding: 1em; background: #ffffe0; }
+		</style>
+	</head>
+
+	<body>
+		<h1>HTML5 Placeholder jQuery Plugin</h1>
+
+		<a href="https://github.com/mathiasbynens/jquery-placeholder"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+
+		<form>
+			<input type="radio" name="color" placeholder-x="This can't be seen"> Red
+			<input type="radio" name="color" placeholder-x="This can't be seen"> Green
+			<input type="radio" name="color" placeholder-x="This can't be seen"> Blue
+
+			<br />
+
+			<input type="checkbox" name="fruits" placeholder-x="This can't be seen"> Apple
+			<input type="checkbox" name="fruits" placeholder-x="This can't be seen"> Banana
+			<input type="checkbox" name="fruits" placeholder-x="This can't be seen"> Pear
+
+			<br />
+
+			<input type="hidden" name="hidden" placeholder-x="This can't be seen">
+
+			<br />
+
+			<input type="search" name="search" placeholder-x="type=search">
+
+			<br />
+			<br />
+
+			<input type="text" name="name" placeholder-x="type=text">
+
+			<br />
+			<br />
+
+			<input type="email" name="email" placeholder-x="type=email">
+
+			<br />
+			<br />
+
+			<input type="url" name="url" placeholder-x="type=url">
+
+			<br />
+			<br />
+
+			<input type="tel" name="tel" placeholder-x="type=tel">
+
+			<br />
+			<br />
+
+			<input type="password" name="password" placeholder-x="type=password" id="p">
+
+			<br />
+			<br />
+
+			<textarea name="message" placeholder-x="textarea"></textarea>
+
+			<br />
+
+			<input type="text" name="location" disabled="disabled" placeholder-x="disabled type=text">
+
+			<br />
+
+			<input type="password" name="code" disabled="disabled" placeholder-x="disabled type=password">
+
+			<br />
+
+			<textarea name="comments" disabled="disabled" placeholder-x="disabled textarea"></textarea>
+
+			<br />
+			<br />
+
+			<label for="p">Click me to focus password field up above</label>
+
+			<br />
+			<br />
+
+			<input type="submit" value="type=submit"> 
+			<input type="reset" value="type=reset">
+		</form>
+
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<script src="jquery.placeholder.js"></script>
+		<script>
+			// To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
+			// $.fn.hide = function() { return this; }
+			// Then uncomment the last rule in the <style> element (in the <head>).
+			$(function() {
+				// Invoke the plugin
+				$('input, textarea').placeholder({customClass:'my-placeholder'});
+				// That’s it, really.
+
+				var html;
+
+				if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
+					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 ($.fn.placeholder.input) {
+					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>').insertBefore('form');
+				}
+			});
+		</script>
+	</body>
+</html>