├── .gitignore
├── LICENSE
├── README.markdown
├── add-clear.jquery.json
├── addclear.js
├── addclear.min.js
├── bower.json
├── index.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Stephen Korecky
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
  1 | **Author:** Stephen Korecky <br>
  2 | **Website:** http://stephenkorecky.com <br>
  3 | **Plugin Website:** https://github.com/skorecky/Add-Clear <br>
  4 | **NPM jQuery Plugin:** https://www.npmjs.com/package/add-clear <br>
  5 | _jQuery Plugin website is outdated and read-only now. Please use NPM_<br>
  6 | **jQuery Plugin:** http://plugins.jquery.com/add-clear/
  7 | 
  8 | ## About
  9 | 
 10 | Add Clear is a jQuery plugin that adds a input clearing button on any input you
 11 | apply it to. It clears the value, and returns focus to that field.
 12 | 
 13 | ## How to use
 14 | 
 15 | - Load jQuery into your project
 16 | - Load Add Clear plugin into your project
 17 | - Setup which elements you would like to apply this plugin to.
 18 | 
 19 | ### Usage
 20 | ```javascript
 21 | $(function(){
 22 |   $("input").addClear();
 23 | });
 24 | 
 25 | // Example onClear option usage
 26 | $("input").addClear({
 27 |   onClear: function(){
 28 |     alert("call back!");
 29 |   }
 30 | });
 31 | ```
 32 | ### Available Options
 33 | 
 34 | <table>
 35 |   <tr>
 36 |     <th>Option</th>
 37 |     <th>Default</th>
 38 |     <th>Type</th>
 39 |   </tr>
 40 |   <tr>
 41 |     <td>closeSymbol</td>
 42 |     <td>&#10006;</td>
 43 |     <td>string</td>
 44 |   </tr>
 45 |   <tr>
 46 |     <td>top</td>
 47 |     <td>1</td>
 48 |     <td>number</td>
 49 |   </tr>
 50 |   <tr>
 51 |     <td>right</td>
 52 |     <td>4</td>
 53 |     <td>number</td>
 54 |   </tr>
 55 |   <tr>
 56 |     <td>returnFocus</td>
 57 |     <td>true</td>
 58 |     <td>boolean</td>
 59 |   </tr>
 60 |   <tr>
 61 |     <td>showOnLoad</td>
 62 |     <td>false</td>
 63 |     <td>boolean</td>
 64 |   </tr>
 65 |   <tr>
 66 |     <td>hideOnBlur</td>
 67 |     <td>false</td>
 68 |     <td>boolean</td>
 69 |   </tr>
 70 |   <tr>
 71 |     <td>tabbable</td>
 72 |     <td>true</td>
 73 |     <td>boolean</td>
 74 |   </tr>
 75 |   <tr>
 76 |     <td>onClear</td>
 77 |     <td>null</td>
 78 |     <td>function</td>
 79 |   </tr>
 80 |   <tr>
 81 |     <td>paddingRight</td>
 82 |     <td>20px</td>
 83 |     <td>string</td>
 84 |   </tr>
 85 |   <tr>
 86 |     <td>LineHeight</td>
 87 |     <td>1</td>
 88 |     <td>string</td>
 89 |   </tr>
 90 |   <tr>
 91 |     <td>display</td>
 92 |     <td>block</td>
 93 |     <td>string</td>
 94 |   </tr>
 95 | </table>
 96 | 
 97 | ### Note about Microsoft Browsers
 98 | 
 99 | The more modern Microsoft browsers (IE10+ and Edge) have built-in clear buttons that appear
100 | automatically on text inputs. To prevent those buttons from interfering with Add Clear, you must
101 | use the `::-ms-clear` CSS pseudo-element in your styles, as described here:
102 | 
103 | https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear
104 | 


--------------------------------------------------------------------------------
/add-clear.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "add-clear",
 3 |   "title": "jQuery Add Clear",
 4 |   "description": "jQuery plugin for adding a clear action to the end of a text input",
 5 |   "keywords": [
 6 |     "input",
 7 |     "close",
 8 |     "text",
 9 |     "clear"
10 |   ],
11 |   "version": "2.0.7",
12 |   "author": {
13 |     "name": "Stephen Korecky",
14 |     "url": "http://stephenkorecky.com"
15 |   },
16 |   "maintainers": [
17 |     {
18 |       "name": "Stephen Korecky",
19 |       "email": "skorecky@gmail.com",
20 |       "url": "http://stephenkorecky.com"
21 |     }
22 |   ],
23 |   "licenses": [
24 |     {
25 |       "type": "MIT",
26 |       "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
27 |     }
28 |   ],
29 |   "bugs": "https://github.com/skorecky/Add-Clear/issues",
30 |   "homepage": "http://github.com/skorecky/Add-Clear ",
31 |   "docs": "https://github.com/skorecky/Add-Clear",
32 |   "download": "http://code.jquery.com/#add-clear",
33 |   "dependencies": {
34 |     "jquery": ">=1.8"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/addclear.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  Author: Stephen Korecky
  3 |  Website: http://stephenkorecky.com
  4 |  Plugin Website: http://github.com/skorecky/Add-Clear
  5 |  Version: 2.0.6
  6 | 
  7 |  The MIT License (MIT)
  8 | 
  9 |  Copyright (c) 2015 Stephen Korecky
 10 | 
 11 |  Permission is hereby granted, free of charge, to any person obtaining a copy
 12 |  of this software and associated documentation files (the "Software"), to deal
 13 |  in the Software without restriction, including without limitation the rights
 14 |  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 15 |  copies of the Software, and to permit persons to whom the Software is
 16 |  furnished to do so, subject to the following conditions:
 17 | 
 18 |  The above copyright notice and this permission notice shall be included in all
 19 |  copies or substantial portions of the Software.
 20 | 
 21 |  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 22 |  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 23 |  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 24 |  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 25 |  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 26 |  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 27 |  SOFTWARE.
 28 | */
 29 | 
 30 | ;(function($, window, document, undefined) {
 31 | 
 32 | 	// Create the defaults once
 33 | 	var pluginName = "addClear",
 34 | 		defaults = {
 35 | 			closeSymbol: "&#10006;",
 36 | 			color: "#CCC",
 37 | 			top: 1,
 38 | 			right: 4,
 39 | 			returnFocus: true,
 40 | 			showOnLoad: false,
 41 | 			onClear: null,
 42 | 			hideOnBlur: false,
 43 | 			tabbable: true,
 44 | 			paddingRight: '20px',
 45 | 			lineHeight: '1',
 46 | 			display: "block"
 47 | 		};
 48 | 
 49 | 	// The actual plugin constructor
 50 | 	function Plugin(element, options) {
 51 | 		this.element = element;
 52 | 
 53 | 		this.options = $.extend({}, defaults, options);
 54 | 
 55 | 		this._defaults = defaults;
 56 | 		this._name = pluginName;
 57 | 
 58 | 		this.init();
 59 | 	}
 60 | 
 61 | 	Plugin.prototype = {
 62 | 
 63 | 		init: function() {
 64 | 			var $this = $(this.element),
 65 | 					$clearButton,
 66 | 					me = this,
 67 | 					options = this.options;
 68 | 
 69 | 			$this.wrap("<div style='display:inline; position:relative;' class='add-clear-span'></div>");
 70 | 			var tabIndex = options.tabbable ? "" : " tabindex='-1'";
 71 | 			$clearButton = $("<a href='#clear' style='display: none;'" + tabIndex + ">" + options.closeSymbol + "</a>");
 72 | 			$this.after($clearButton);
 73 | 			$this.next().css({
 74 | 				color: options.color,
 75 | 				textDecoration: 'none',
 76 | 				display: 'none',
 77 | 				overflow: 'hidden',
 78 | 				position: 'absolute',
 79 | 				right: options.right,
 80 | 				top: options.top,
 81 | 				lineHeight: options.lineHeight
 82 | 			}, this);
 83 | 
 84 | 			if (options.paddingRight) {
 85 | 				$this.css({
 86 | 					'padding-right': options.paddingRight
 87 | 				});
 88 | 			}
 89 | 
 90 | 			if ($this.val().length >= 1 && options.showOnLoad === true) {
 91 | 				$clearButton.css({display: options.display});
 92 | 			}
 93 | 
 94 | 			$this.focus(function() {
 95 | 				if ($(this).val().length >= 1) {
 96 | 					$clearButton.css({display: options.display});
 97 | 				}
 98 | 			});
 99 | 
100 | 			$this.blur(function(e) {
101 | 				if (options.hideOnBlur) {
102 | 					setTimeout(function() {
103 | 						var relatedTarget = e.relatedTarget || e.explicitOriginalTarget || document.activeElement;
104 | 						if (relatedTarget !== $clearButton[0]) {
105 | 							$clearButton.css({display: 'none'});
106 | 						}
107 | 					}, 0);
108 | 				}
109 | 			});
110 | 
111 | 			var handleUserInput = function() {
112 | 				if ($(this).val().length >= 1) {
113 | 					$clearButton.css({display: options.display});
114 | 				} else {
115 | 					$clearButton.css({display: 'none'});
116 | 				}
117 | 			};
118 | 
119 | 			var handleInput = function () {
120 | 			    $this.off('keyup', handleUserInput);
121 | 				$this.off('cut', handleUserInput);
122 | 				handleInput = handleUserInput;
123 | 				handleUserInput.call(this);
124 | 			};
125 | 
126 | 			$this.on('keyup', handleUserInput);
127 | 
128 | 			$this.on('cut', function () {
129 | 				var self = this;
130 | 				setTimeout(function () {
131 | 					handleUserInput.call(self);
132 | 				}, 0);
133 | 			});
134 | 
135 | 			$this.on('input', function () {
136 | 				handleInput.call(this);
137 | 			});
138 | 
139 | 			if (options.hideOnBlur) {
140 | 				$clearButton.blur(function () {
141 | 					$clearButton.css({display: 'none'});
142 | 				});
143 | 			}
144 | 
145 | 			$clearButton.click(function(e) {
146 | 				var $input = $(me.element);
147 | 				$input.val("");
148 | 				$(this).css({display: 'none'});
149 | 				if (options.returnFocus === true) {
150 | 					$input.focus();
151 | 				}
152 | 				if (options.onClear) {
153 | 					options.onClear($input);
154 | 				}
155 | 				e.preventDefault();
156 | 			});
157 | 		}
158 | 
159 | 	};
160 | 
161 | 	$.fn[pluginName] = function(options) {
162 | 		return this.each(function() {
163 | 			if (!$.data(this, "plugin_" + pluginName)) {
164 | 				$.data(this, "plugin_" + pluginName,
165 | 					new Plugin(this, options));
166 | 			}
167 | 		});
168 | 	};
169 | 
170 | })(jQuery, window, document);
171 | 


--------------------------------------------------------------------------------
/addclear.min.js:
--------------------------------------------------------------------------------
1 | !function(i,n,t,e){function l(n,t){this.element=n,this.options=i.extend({},o,t),this._defaults=o,this._name=s,this.init()}var s="addClear",o={closeSymbol:"&#10006;",color:"#CCC",top:1,right:4,returnFocus:!0,showOnLoad:!1,onClear:null,hideOnBlur:!1,tabbable:!0,paddingRight:"20px",lineHeight:"1",display:"block"};l.prototype={init:function(){var n,e=i(this.element),l=this,s=this.options;e.wrap("<div style='display:inline; position:relative;' class='add-clear-span'></div>");var o=s.tabbable?"":" tabindex='-1'";n=i("<a href='#clear' style='display: none;'"+o+">"+s.closeSymbol+"</a>"),e.after(n),e.next().css({color:s.color,textDecoration:"none",display:"none",overflow:"hidden",position:"absolute",right:s.right,top:s.top,lineHeight:s.lineHeight},this),s.paddingRight&&e.css({"padding-right":s.paddingRight}),e.val().length>=1&&s.showOnLoad===!0&&n.css({display:s.display}),e.focus(function(){i(this).val().length>=1&&n.css({display:s.display})}),e.blur(function(i){s.hideOnBlur&&setTimeout(function(){var e=i.relatedTarget||i.explicitOriginalTarget||t.activeElement;e!==n[0]&&n.css({display:"none"})},0)});var a=function(){i(this).val().length>=1?n.css({display:s.display}):n.css({display:"none"})},c=function(){e.off("keyup",a),e.off("cut",a),c=a,a.call(this)};e.on("keyup",a),e.on("cut",function(){var i=this;setTimeout(function(){a.call(i)},0)}),e.on("input",function(){c.call(this)}),s.hideOnBlur&&n.blur(function(){n.css({display:"none"})}),n.click(function(n){var t=i(l.element);t.val(""),i(this).css({display:"none"}),s.returnFocus===!0&&t.focus(),s.onClear&&s.onClear(t),n.preventDefault()})}},i.fn[s]=function(n){return this.each(function(){i.data(this,"plugin_"+s)||i.data(this,"plugin_"+s,new l(this,n))})}}(jQuery,window,document);
2 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Add-Clear",
 3 |   "authors": [
 4 |     "Stephen Korecky <http://stephenkorecky.com>"
 5 |   ],
 6 |   "description": "jQuery Plugin to add a (x) clear button to your input fields",
 7 |   "main": "addclear.js",
 8 |   "keywords": [
 9 |     "forms",
10 |     "clear",
11 |     "input",
12 |     "text",
13 |     "search"
14 |   ],
15 |   "license": "MIT",
16 |   "homepage": "http://skorecky.github.io/Add-Clear/",
17 |   "ignore": [
18 |     "**/.*",
19 |     "node_modules",
20 |     "bower_components",
21 |     "test",
22 |     "tests"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |    "http://www.w3.org/TR/html4/strict.dtd">
 3 | 
 4 | <html lang="en">
 5 | <head>
 6 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 | 	<title>Add Clear - jQuery Plugin - Demo</title>
 8 | 	<meta name="author" content="Stephen Korecky">
 9 | 	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
10 | 	<script type="text/javascript" src="addclear.js"></script>
11 | 	<script type="text/javascript" charset="utf-8">
12 | 	  $(function(){
13 | 	    $("input").addClear();
14 | 	  });
15 | 	</script>
16 | 	<style type="text/css" media="screen">
17 | 
18 | 	body {
19 | 	  font:normal 16px/1.5 "Helvetica Neue", Helvetica, sans-serif;
20 | 	}
21 | 
22 | 	 #wrapper {
23 | 	   margin:100px auto 0;
24 | 	   width:500px;
25 | 	 }
26 | 
27 | 	 #wrapper h1 {
28 |      border-bottom:1px solid #EEE;
29 |      color:#666;
30 | 	   font-size:28px;
31 | 	 }
32 | 
33 | 	 #wrapper #search {
34 | 	   background:#F5F5F5;
35 |  	   border-radius: 2px;
36 |  	   font-weight:bold;
37 |  	   padding:10px;
38 |  	 }
39 | 
40 | 	 #wrapper #search label {
41 |      color:#999;
42 | 	   font-weight:bold;
43 | 	   margin:0 5px;
44 | 	 }
45 | 
46 | 	 #wrapper #search input {
47 |      font-size: 18px;
48 | 	   width:200px;
49 | 	 }
50 | 
51 | 	 #wrapper #search span.note {
52 |      color:#CCC;
53 |      display:block;
54 | 	   font-size:12px;
55 | 	   font-weight:normal;
56 |      margin:5px 0 0 ;
57 | 	 }
58 | 	</style>
59 | </head>
60 | <body>
61 |   <div id="wrapper">
62 |     <h1>Add Clear - jQuery Plugin</h1>
63 |     <p id="search">
64 |       <label for="search_input">Search</label>
65 |       <input type="text" name="search" value="" id="search_input">
66 |       <span class="note">When you type something in this box, the clear button will appear.</span>
67 |     </p>
68 |     <p><a href="http://github.com/skorecky/Add-Clear">Github Project Page</a> | <a href="http://twitter.com/skorecky">@skorecky</a></p>
69 |   </div>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "add-clear",
 3 |   "version": "2.0.7",
 4 |   "description": "jQuery plugin to add a clear button to text input fields",
 5 |   "main": "addclear.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/skorecky/Add-Clear.git"
12 |   },
13 |   "keywords": [
14 |     "jquery-plugin",
15 |     "ecosystem:jquery",
16 |     "add",
17 |     "clear",
18 |     "text",
19 |     "input",
20 |     "field"
21 |   ],
22 |   "author": "Stephen Korecky",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/skorecky/Add-Clear/issues"
26 |   },
27 |   "homepage": "https://github.com/skorecky/Add-Clear#readme"
28 | }
29 | 


--------------------------------------------------------------------------------