实现输入框自带清除按钮

输入框自带清除按钮是很常见的需求了，网上有很多方案，最基础的是原生实现input和清除按钮，然后绑定一大堆事件，此种方案非常原始，而且复用性极差。稍微好点的方案有基于bootstrap和jQuery的，将input和清除按钮集成起来，但样式依赖bootstrap，加重了文件引入数，而且很容易有jQuery版本不兼容的问题。这里提供一个插件，仅依赖jQuery，我们实现的功能有：
1、以一种很简单的方式提供清除按钮的创建
2、可自定义清除按钮样式
3、支持一些常用功能，例如显示，隐藏、显示警告色等
4、为input提供简单的校验功能

使用说明

1、创建清除按钮

为input元素添加data-auto-clear-button属性，这样就会自动创建清除按钮，如下所示：

<input data-auto-clear-button id="mobile" type="tel" placeholder="请输入您注册的手机号"/>
或者
<input data-auto-clear-button="true" id="mobile" type="tel" placeholder="请输入您注册的手机号"/>

效果图：

也可以在需要的时候，通过js创建：

$('#mobile').autoClearButtonInput('create');

2、自定义清除按钮样式

插件自带一个清除按钮样式，但是你也可以自己定义清除按钮样式。方法是通过setDefaut方法设置icon为自定义的清除按钮样式。

$.autoClearButtonInput.setDefault({
	 icon: 'your-close-button-css-class' // 自定义清除按钮样式
});

3、常用方法

插件提供了一些常用方法，如下所示：

1、创建清除按钮
$('#mobile').autoClearButtonInput('create');
2、销毁按钮
$('#mobile').autoClearButtonInput('destroy');
3、显示清除按钮
$('#mobile').autoClearButtonInput('show');
4、隐藏清除按钮
$('#mobile').autoClearButtonInput('hide');
5、显示警告
$('#mobile').autoClearButtonInput('warn');
6、清除警告
$('#mobile').autoClearButtonInput('clearWarn');
7、设置校验方法
$('#mobile').autoClearButtonInput('setValidateFunction',function(data){});
8、校验内容
$('#mobile').autoClearButtonInput('validte');

4、默认设置

该插件提供了两个默认设置：

icon	enableValidation
自定义关闭按钮样式类	是否启用校验功能

可以通过setDefault方法更改默认配置：

 $.autoClearButtonInput.setDefault({
            icon: 'my_input_close_button', // 自定义关闭按钮样式
            enableValidation: true // 关闭校验功能，默认关闭
        });

5、校验功能

该插件提供了简单的校验功能，默认是关闭的，启用方法参考第4节内容。我们可以通过setValidationFunction方法，自定义校验逻辑，返回结果即可。

$('#mobile').autoClearButtonInput('setValidateFunction',function(data){
		       return checkPhone(data); // 校验逻辑，自行实现，返回true or false
        })

然后通过validate方法进行校验：

var isValid = $('#mobile').autoClearButtonInput("validate");

当校验不通过时，输入框会变红，如下所示：

插件地址

https://github.com/gameloft9/auto-clear-button-input
如果觉得好用，麻烦点个star，谢谢~