bootstrap-add-clear documentation

Getting Started

How you acquire bootstrap-add-clear is up to you.

Install with Bower:

bower install bootstrap-add-clear

Install with NPM:

npm install bootstrap-add-clear

If you are using browserify to bundle, you will have to expose jQuery globally: entry.js

var $ = require('jquery');
global.jQuery = $;
require('bootstrap-add-clear');

git clone git@github.com:gesquive/bootstrap-add-clear.git

Note: bootstrap-add-clear has a dependency on jquery 1.8+ and Bootstrap 3

Option	Type	Default	Description
closeSymbol	string		You can clear out the symbol class and instead use a character like '✖'
symbolClass	string	glyphicon glyphicon-remove-circle	The symbol class to assign to the floating div
wrapperClass	string		This element wraps the entire input, you can assign a class to help with formatting
top	number	0	By default the symbol is centered, this numberof pixels can offset it up and down
right	number	0	By default the symbol is centered, this number of pixels can offset it left and right
returnFocus	boolean	true	If true, focus will return to the text box after clearing
showOnLoad	boolean	false	If true, show the symbol when the script loads
clearOnEscape	boolean	true	If true, clear the text box contents when the escape button is pressed
hideOnBlur	boolean	false	If true, hide the symbol when focus is lost from the text box
zindex	number	100	The zindex to apply to the symbol
onClear	function	false	Function callback that runs when the text box is cleared. Clearing can occur from either clicking the symbol or pressing the escape key if clearOnEscape is set to true

bootstrap-add-clear will make a text box behave like this:

$(function(){
  $(":input").addClear();
});

The onClear event is triggered whenever the 'x' is clicked or the ESC button is pressed.

$(":input").addClear({
  onClear: function(){
	alert("Input Cleared!");
  }
});

It's easy to use other iconic fonts or images instead of glyphicons.

$(":input").addClear({
	symbolClass: "fa fa-times-circle"
});