https://github.com/skorecky/Add-Clear

jQuery Plugin to add a (x) clear button to your input fields
https://github.com/skorecky/Add-Clear

Last synced: 3 months ago
JSON representation

jQuery Plugin to add a (x) clear button to your input fields

• Host: GitHub
• URL: https://github.com/skorecky/Add-Clear
• Owner: skorecky
• License: mit
• Created: 2010-06-29T16:14:17.000Z (almost 14 years ago)
• Default Branch: master
• Last Pushed: 2016-08-16T02:21:31.000Z (almost 8 years ago)
• Last Synced: 2024-02-08T09:40:31.322Z (4 months ago)
• Language: JavaScript
• Homepage: http://skorecky.github.com/Add-Clear
• Size: 67.4 KB
• Stars: 97
• Watchers: 6
• Forks: 24
• Open Issues: 3
• Metadata Files:
  • Readme: README.markdown
  • License: LICENSE

Lists

• awesome - skorecky/Add-Clear - jQuery Plugin to add a (x) clear button to your input fields (JavaScript)
• awesome-stars - Add-Clear

README

        
**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

```javascript

$(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