Question

我想在我的网络应用程序上安装可清除的文本框。我得到了这个有效的代码。

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();
            });
        });
    });

HTML

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

这是一个示例 JSFIDDLE http://jsfiddle.net/h7fybLxn/3/

是否可以为我的应用程序中的所有文本框设置它？

喜欢input[type=text]。

Answer 1

http://jsfiddle.net/h7fybLxn/4/

这是你之后的事吗？

我已经更新了你的小提琴，所以你清除所有同一类的文本框，而不是选择＆＃39;这个＆＃39;。

而不是：

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

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

1 个答案: