add-clear

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