[jQuery][插件]重置文本框值的小按钮

先上图

---

HTML

这个插件没有任何样式，所以需要自己写把样式写好

<div class="container">
    <p>
        <input id="username" type="text" placeholder="This is Test" />
        <span data-target="username">&times;</span>
    </p>
    <p>
        <input id="password" type="text" placeholder="Nothing" />
        <span data-target="password">&times;</span>
    </p>
</div>

---

CSS

样式完全是自己定义

body {
  padding: 20px;
}
p {
  position: relative;
  width: 200px;
  padding: 5px;
  border: 1px solid lightgray;
}
p input {
  display: inline-block;
  width: 100%;
  font-size: 1em;
  border: none;
  outline: none;
}
p span {
  position: absolute;
  top: 50%;
  right: 2em;
  margin-top: -11px;
  display: inline-block;
  padding: 0 .5em;
  border-radius: 50%;
  font-weight: bold;
  color: white;
  background-color: lightgray;
  cursor: pointer;
}

JS

这算是初次写插件吧（这也算插件？-。-）
不知道这样的写法规不规范，希望大家能指正。

+function ($, window, document, undefined) {
    var reset = function (ele, opt) {
        this.$element = $(ele),
        this.$target = null,
        this.defaults = {
            'value': '',
            'autohide': true,
            'target': '',
        },
        this.options = $.extend({}, this.defaults, opt);
    }
    $.fn.btnReset = function (options) {
        var btn = new reset(this, options);
        btn.$target = $('#' + btn.options.target);
        btn.$element.click(function () {
            btn.$target.val(btn.options.value);
            if (btn.options.autohide) {
                btn.$element.hide();
            }
        });
        if (btn.options.autohide) {
            btn.$element.hide();
            btn.$target.keyup(function () {
                btn.$element.show();
            });
        }
        return btn;
    }
}(jQuery, window, document);

调用方法

首先引入相关js
然后就是调用 btnReset 方法了

<script>
    $(document).ready(function () {
        $("span").each(function () {
            $(this).btnReset({
                'target': $(this).data('target'),
            });
        });
    });
</script>

参数说明

target

输入框的id，必须！

value

点击按钮之后设定的值，默认为空字符串''

autoHide

按钮是否自动隐藏，默认为true