Author: Stephen Korecky
Website: http://stephenkorecky.com
Plugin Website: https://github.com/skorecky/Add-Clear
NPM jQuery Plugin: https://www.npmjs.com/package/add-clear
jQuery Plugin website is outdated and read-only now. Please use NPM
jQuery Plugin: http://plugins.jquery.com/add-clear/
About
Add Clear is a jQuery plugin that adds a input clearing button on any input you apply it to. It clears the value, and returns focus to that field.
How to use
- Load jQuery into your project
- Load Add Clear plugin into your project
- Setup which elements you would like to apply this plugin to.
Usage
$(function(){ $("input").addClear(); }); // Example onClear option usage $("input").addClear({ onClear: function(){ alert("call back!"); } });Available Options
| Option | Default | Type |
|---|---|---|
| closeSymbol | ✖ | string |
| top | 1 | number |
| right | 4 | number |
| returnFocus | true | boolean |
| showOnLoad | false | boolean |
| hideOnBlur | false | boolean |
| tabbable | true | boolean |
| onClear | null | function |
| paddingRight | 20px | string |
| LineHeight | 1 | string |
| display | block | string |
Note about Microsoft Browsers
The more modern Microsoft browsers (IE10+ and Edge) have built-in clear buttons that appear automatically on text inputs. To prevent those buttons from interfering with Add Clear, you must use the ::-ms-clear CSS pseudo-element in your styles, as described here:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear
