功能 features

示例 demo

文本框 input text

代码 code

$('#input1').inputClear();

文本框 input text

* 新的"input"会自动拷贝原先input的大部分样式，并自动减少原先input的宽度以保持整体宽度样式不变。The new "input" can clone most styles from prev input, and reduce the width of prev input to maintain the overall style of width unchanged.

代码 code

$('#input2').inputClear({
    show: 'hover',
    title: '清空'
});

文本框 input text

* 可以自定义清除函数。The clear function can be set by parameter.

代码 code

$('#input3').inputClear({
    callback: function ($input) {
        alert('value: ' + $input.val() + ', do something else~');
        $input.val('');
        $input.focus();
    }
});

使用 usage

首先在页面上引用css文件和js文件，css文件一般在<head>中添加，js文件一般在</body>之前添加。注意要先引用jquery，再引用该js。
Firstly reference the css and js file of this plugin, the best location of the css reference is in <head>, and the js is before </body>, make sure the js follows jQuery. 

<head>
    ...
    <!--the css for this plugin-->
    <link rel="stylesheet" href="css/jquery.inputClear.css"/>
</head>
<body>
...
<!--the js for jquery-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<!--the js for this plugin-->
<script src="js/jquery.inputClear.js"></script>
</body>

然后在input上执行初始化
then initialize inputClear on input text 

$('input[type=text]').inputClear(options);

参数 options

名称 name 类型 type 默认值 default 说明 desc
show String 'always' 清除按钮的显示模式，包括'always':总是显示，'hover':鼠标移上显示，'focus':文本框激活时显示。
The display style of the clear button, optional 'always':always show, 'hover':hover show, 'focus':focus show.
title String 'clear' 鼠标指向清除按钮时的提示文本。
The title text when point to the clear button.
callback Function 
function ($input) {
    $input.val('');
    $input.focus();
}
点击清除按钮时触发的函数，参数为jQuery包装后的input text元素，若配置则会覆盖默认函数。
The function for clear button, the parameter is the input text with jQuery, if set will overwrite default function.