Initial commit

SamPlacette · Jul 30, 2013 · cefb8dc · cefb8dc
commit cefb8dc
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 0 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,20 @@
+The X11 License (X11)
+
+Copyright (c) 2013 Shane Carr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,41 @@
+Placeholdr
+==========
+
+**Placeholdr** is a super-lightweight drop-in jQuery-based polyfill to support the HTML5 placeholder attribute in IE 9 and other non-compliant browsers.  Minified size, even with the license, is less than 1 KB!
+
+Placeholdr is licensed under the X11 open-source license.
+
+## Basic Usage
+
+    <script type="text/javascript" src="placeholdr.min.js"></script>
+
+It's really that simple.
+
+## Installation
+
+Choose one:
+
+- Add this repository as a subrepo to your project and symlink `placeholder.min.js` to your javascript assets folder.  This enables you to easily receive updates.
+- Download the `placeholder.min.js` file directly to your assets folder.  Don't forget to check for updates by visiting this page every few months.
+
+## Advanced Usage
+
+Placeholdr exposes a `placeholdr()` jQuery function.  When called on a jQuery object, Placeholdr searches all decendants of the object for inputs that have a `placeholder` attribute.
+
+Placeholdr runs the following code on page load:
+
+    $(document).placeholdr(); // automatically run in $(document).ready()
+
+You need to re-run Placeholdr if you dynamically add new input placeholder elements.  For example:
+
+    var myForm = $("<form><input placeholder='Hello World'></form>");
+    $(document.body).append(myForm);
+    myForm.placeholdr();
+
+By default, Placeholdr colors the placeholder text gray #AAA.  If you would like to change this behavior, add CSS for the `.placeholdr` class:
+
+    .placeholdr {
+        color: blue;
+    }
+
+Note that this CSS must be included *after* the Placeholdr library.  If this is not possible, add the `!important` flag to your color declaration.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Placeholdr Demo</title>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+	<script type="text/javascript" src="placeholdr.js"></script>
+</head>
+<body>
+	<input type="text" placeholder="Username" />
+	<input type="password" placeholder="Password" />
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "Placeholdr",
+  "version": "1.0.0",
+  "description": "Super-lightweight drop-in jQuery-based polyfill for the HTML5 placeholder attribute",
+  "main": "placeholdr.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vote539/placeholdr.git"
+  },
+  "keywords": [
+    "placeholder",
+    "polyfill",
+    "jquery",
+    "ie"
+  ],
+  "author": "Shane Carr",
+  "license": "X11",
+  "readmeFilename": "README.md"
+}
diff --git a/placeholdr.js b/placeholdr.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2013 Shane Carr
+ *
+ * https://github.com/vote539/placeholdr
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+(function($){
+	// Utility functions
+	var putPlaceholder = function(){
+		var $this = $(this);
+		if (!$this.val()) {
+			$this.addClass("placeholdr");
+			if ($this.attr("type") === "password") {
+				$this.attr("type", "text");
+				$this.data("placeholdr-pwd", true);
+			}
+			$this.val($this.attr("placeholder"));
+		}
+	};
+	var clearPlaceholder = function(){
+		var $this = $(this);
+		$this.removeClass("placeholdr");
+		if ($this.data("placeholdr-pwd")) {
+			$this.attr("type", "password");
+		}
+		if ($this.val() === $this.attr("placeholder")){
+			$this.val("");
+		}
+	};
+	var clearPlaceholdersInForm = function(){
+		$(this).find("input").each(function() {
+			if ($(this).val() === $(this).attr("placeholder")) {
+				$(this).val("");
+			}
+		});
+	};
+
+	$.fn.placeholdr = function(){
+		// Don't evaluate the polyfill if the browser supports placeholders
+		//if ("placeholder" in document.createElement("input")) return;
+
+		// Find and iterate through all inputs that have a placeholder attribute
+		$(this).find("input[placeholder]").each(function(){
+			var $this = $(this);
+
+			// leave now if we've polyfilled this element before
+			if ($this.data("placeholdr")) return;
+			$this.data("placeholdr", true);
+
+			// put the placeholder into the value
+			putPlaceholder.call(this);
+
+			// handle focus and blur events
+			$this.focus(clearPlaceholder);
+			$this.blur(putPlaceholder);
+		});
+
+		// Find and iterate through all form elements in order to prevent
+		// placeholders from being submitted in forms.
+		$(this).find("form").each(function(){
+			var $this = $(this);
+
+			// leave now if we've polyfilled this element before
+			if ($this.data("placeholdr")) return;
+			$this.data("placeholdr", true);
+
+			$this.submit(clearPlaceholdersInForm);
+		});
+	};
+
+	// Evaluate the script on page ready
+	$(function(){
+		$(document).placeholdr();
+	});
+
+	// Add default CSS rule
+	document.write("<style>.placeholdr{color:#AAA;}</style>");
+})(jQuery);
diff --git a/placeholdr.min.js b/placeholdr.min.js