gesquive/bootstrap-add-clear

bootstrap plugin to add a (x) clear button to your input fields

Maintainer: Gus Esquivel
Plugin Website: http://gesquive.github.io/bootstrap-add-clear
Contributers: Stephen Korecky, scoman81, Steve887, Deividy, zarv1k, grrizzly, adambiggs, Vladekk, denisj, starspoint

About

This project is a fork of Stephen Korecky's "Add Clear" project. It is meant to work as a drop-in replacement when using bootstrap.

Getting Started

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

Bower

Install with Bower:

bower install bootstrap-add-clear

NPM

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');

Github

Clone the boostrap-add-clear repository:

git clone [email protected]:gesquive/bootstrap-add-clear.git

Direct Download

• zip
• tarbell
• Individual Files
  • bootstrap-add-clear.js
  • bootstrap-add-clear.min.js

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

Available Options

Option	Type	Default
closeSymbol	string
symbolClass	string	glyphicon glyphicon-remove-circle
wrapperClass	string
top	number	0
right	number	0
returnFocus	boolean	true
showOnLoad	boolean	false
clearOnEscape	boolean	true
hideOnBlur	boolean	false
zindex	number	100
onClear	function	null

Using Options

$("input").addClear({top : -2, right : 6});

// Example onClear option usage
$(":input").addClear({
  onClear: function(){
    alert("call back!");
  }
});

// Example font awesome icon usage
$(":input").addClear({
    symbolClass: "fa fa-times-circle"
})

bootstrap-add-clear's Issues

invisible clear button when span.input-group-btn is attached

following code doesn't show properly clear-button:

<div class="form-group search optional q_query">
  <label class="search optional col-sm-3 control-label" for="q_query">Dokument obsahuje</label>
  <div class="col-sm-9">
    <div class="input-group col-sm-12">
      <input id="q_query" class="string required form-control clear-button" type="text" name="q[query]" value="asdfadsasdf">
      <span class="input-group-btn">
        <button id="query_button" class="btn btn-default" type="submit">
      </span>
    </div>
  </div>
</div>

This could be fixed by setting z-index to span.add-clear-x element.

Release the latest fix.

Could you release v1.03? It has a fix I need.

In Laravel, when returning from failed validation of a form, the inputs lose the x's

After returning, I am repopulating each input field with it's previous submit contents, but the x's don't appear because they don't know I've done this in the template.
Can you think of a way where I can touch each input, without tabbing through them all, to wake up the x's?

Symbol X and form reset

If form has a reset button, symbol X does not disappear when button is clicked

See example:
http://www.bootply.com/nIZihCQwUq