jquery - 输入文本框 : mimic "clear text" X button just like select2 dropdown component

Question

我一直在使用 select2 作为我选择的网站 UI。但是，我注意到有一个用于 select2 的特性，我觉得应该用于我的文本框；清除所有功能。

http://ivaynberg.github.io/select2/

我在网络上看到了很多关于如何将清除按钮添加到文本框元素的帖子，但似乎没有一个符合我的兴趣。因为我正在使用 select2，所以我希望我的输入框具有与我的 select2 相同的外观和感觉，包括“清除按钮”。

我能找到的最接近的功能控件位于此处:Clearing Search terms from input field. ，他给出了 demo found here.

这样做有两个缺点:

1. ie7 和 ie8 不支持。 (我知道这不是真正的缺点，但作为开发人员来说是)
2. 与 select2 一起使用时对演示没有帮助

如果有人知道任何解决方案，那将是一个很好的帮助

Answer 1

这是我想出的解决方案:

请检查代码，看看是否可以进行任何调整。我使用的是 jquery，但决定将其作为 angular js 指令，因为它完全是 UI，与数据本身无关。

我从 html 开始:

<div clear-text>
    <input ng-model="CustomerName" type="text" name="" value="" placeholder="Name" />
</div>

请注意，我的输入框周围必须有一个 div。为了让我的 X 出现，你需要有一个包装器。你会看到当我包含我的 css 时会发生什么:

.clearable{
    display: inline-block;
    *display: inline;
    zoom: 1;
    height:30px;
}

.clearable input
{
    float: left;
    background: transparent;
    cursor:pointer;
}

.clearable.x{
    background: transparent url(../themes/base/images/clearText-dark.png) no-repeat 95% center;
}
.clearable.onX{
    background: transparent url(../themes/base/images/clearText-light.png) no-repeat 95% center;
}

要点是获得一个输入框，使面部皮肤透明，并让 div 处理图像的显示方式。棘手的部分是实际功能。

这是我的 Angular Directive(指令):

app.directive('clearText', function () {
    var directiveDefinitionObject = {
        link: function link(scope, element, attrs) {

            element.addClass("clearable");

            function tog(v) { return v ? 'addClass' : 'removeClass'; }

            element.keyup(function () {
                element[tog(element.children('input[type=text]:only-child').val())]('x');
            }).mousemove(function (e) {
                e.preventDefault();
                if (element.hasClass('x')) {
                    element[tog(((this.offsetWidth - 30) < (e.clientX - this.getBoundingClientRect().left)) &&
                                ((this.offsetWidth - 5) > (e.clientX - this.getBoundingClientRect().left)) &&
                                ((this.offsetHeight - 30) < (e.clientY - this.getBoundingClientRect().top)) &&
                                ((this.offsetHeight - 5) > (e.clientY - this.getBoundingClientRect().top)))]('onX');
                }
            }).click( function (e) {
                e.preventDefault();
                if (element.hasClass('onX')) {
                    element.removeClass('x onX');
                   element.children('input[type=text]:only-child').val('');
                }
            });
        }
    };
    return (directiveDefinitionObject);
}]);

我想指出几件事。我拒绝在 $document 上做，因为我希望每个元素都相互隔离。所以如果你制作多个文本框，这不会影响另一个。其次，mousemove 用于创建一个小“窗口”，允许 X 的颜色在鼠标悬停在其上时发生变化。

这是 jsfiddle:http://jsfiddle.net/8T27H/2/

在ie7、ie8、ie9、chrome、操作、firefox上测试