Javascript html上的通用可清除文本框？

我想在我的web应用程序上有一个可清除的文本框。我得到了这个工作代码

CSS

.clearable {
    background: url(../Images/close.png) no-repeat right -10px center;
    transition: background 0.4s;
}

.clearable.x {
    background-position: right 10px center;
}

.clearable.onX {
    cursor: pointer;
}

jQuery

    $(document).ready(function () {
        jQuery(function ($) {
            function tog(v) { return v ? 'addClass' : 'removeClass'; }
            $(document).on('input', '.clearable', function () {
                $(this)[tog(this.value)]('x');
            }).on('mousemove', '.x', function (e) {
                $(this)[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
            }).on('click', '.onX', function () {
                $(this).removeClass('x onX').val('').change();
            });
        });
    });

$（文档）.ready（函数（）{
jQuery（函数（$）{
函数tog（v）{return v？'addClass'：'removeClass'；}
$（文档）.on（'input'，'.clearable'，函数（）{
$（此）[tog（此值）]（'x'）；
}).on（'mousemove'，'.x'，函数（e）{
$（this）[tog（this.offsetWidth-18

HTML

<input class="clearable" type="text" />

下面是一个示例JSFIDDLE

是否可以为我的应用程序中的所有文本框制作它

就像有

输入[type=text]

这就是你想要的吗

我更新了你的提琴，这样你就可以清除同一类的所有文本框，而不是选择“this”

与此相反：

$(this).removeClass('x onX').val('').change(); //btw keep this in if you just want to clear each textbox individually

我这样说：

$('.clearable').removeClass('x onX').val('').change();

同时更改HTML，使其具有相同的类：

<input class="clearable" type="text" />
    <br />
    <br />
    <input class='clearable' type="text" /> <!-- I want on this textbox too -->

您必须选择所有文本框，因此就像您在jquery中选择$（'div'）一样，类似$（'textboxvalue'）的内容就足够了。顺便说一句，这不是正确的方法，我只是说类似的方法应该有效：）