From cefb8dcb496e342819822011c3a11d5ca0ea5281 Mon Sep 17 00:00:00 2001 From: Shane Carr Date: Tue, 30 Jul 2013 04:20:50 -0500 Subject: [PATCH] Initial commit --- LICENSE.md | 20 ++++++++++ README.md | 41 ++++++++++++++++++++ demo.html | 12 ++++++ package.json | 19 ++++++++++ placeholdr.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++ placeholdr.min.js | 7 ++++ 6 files changed, 195 insertions(+) create mode 100644 LICENSE.md create mode 100644 README.md create mode 100644 demo.html create mode 100644 package.json create mode 100644 placeholdr.js create mode 100644 placeholdr.min.js diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..9275c05 --- /dev/null +++ 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 new file mode 100644 index 0000000..85b3ce6 --- /dev/null +++ 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 + + + +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 = $("
"); + $(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. \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..ce866fb --- /dev/null +++ b/demo.html @@ -0,0 +1,12 @@ + + + + Placeholdr Demo + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..ddd33c5 --- /dev/null +++ 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 new file mode 100644 index 0000000..70e50b7 --- /dev/null +++ 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(""); +})(jQuery); \ No newline at end of file diff --git a/placeholdr.min.js b/placeholdr.min.js new file mode 100644 index 0000000..9912488 --- /dev/null +++ b/placeholdr.min.js @@ -0,0 +1,7 @@ +/* +Copyright (c) 2013 Shane Carr +https://github.com/vote539/placeholdr +X11 License +*/ +(function(b){function d(){b(this).find("input").c(function(){b(this).b()===b(this).a("placeholder")&&b(this).b("")})}function e(){var a=b(this);a.g("placeholdr");a.data("placeholdr-pwd")&&a.a("type","password");a.b()===a.a("placeholder")&&a.b("")}function c(){var a=b(this);a.b()||(a.b(a.a("placeholder")),a.e("placeholdr"),"password"===a.a("type")&&(a.a("type","text"),a.data("placeholdr-pwd",!0)))}b.f.d=function(){b(this).find("input[placeholder]").c(function(){var a=b(this);a.data("placeholdr")|| +(a.data("placeholdr",!0),c.call(this),a.focus(e),a.blur(c))});b(this).find("form").c(function(){var a=b(this);a.data("placeholdr")||(a.data("placeholdr",!0),a.submit(d))})};b(function(){b(document).d()});document.write("")})(jQuery); \ No newline at end of file