输入文本框：模拟＆QUOT;明文＆QUOT; X按钮就像选择2下拉组件 [英] input textbox: mimic "clear text" X button just like select2 dropdown component

问题描述

我一直在使用SELECT2作为我为我的网站选择的UI。然而，我注意到，有用于选择2，我觉得应该用于我的文本框的功能;清除所有功能。

I've been using select2 as my UI of choice for my website. However, I noticed that there is a feature used for select2 that I feel should be used for my textbox; the clear all feature.

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

我已经看到了如何添加一个清除按钮到一个文本框元素的网络上无数的帖子，但似乎没有适合我的利益。因为我有工作SELECT2，我希望我的输入框，以具有相同的外观和感觉我的选择2，这是包括清除按钮。

I've seen numerous posts around the web on how to add a clear button into a textbox element, but none seemed to suit my interests. Because I'm working with select2, I want my input boxes to have the same look at and feel as my select2, which is to include the "clear button".

最近的功能控制我能找到这里找到：从输入清除搜索条款域。，在那里，他给出了一个演示这里找到。

The closest functional control I was able to find is found here: Clearing Search terms from input field., where he gives a demo found here.

有两个缺点是：

1. 这是不是IE7和IE8的支持。 （我知道不是一个真正的缺点，但作为一个开发它是）


2. 与选择2
使用时不带presentation帮助

1. It is not supported by ie7 and ie8. (I know not really a downside, but as a dev it is)
2. Doesn't help with presentation when used with select2

如果有谁知道的任何解决方案，这会是一个很好的帮助。

If anyone know of any solutions, that'd be a good help

推荐答案

下面是我想出了解决办法：

Here is the solution I came up with:

请检查出code，看看是否有可能可以做任何调整。我使用jquery，但决定把它作为一个角度JS指令，因为它完全是UI和无关的数据本身。

Please check out the code and see if there can be any tweaks that could be done. I was using jquery, but decided to make it as an angular js directive since it is completely UI and have nothing to do with the data itself.

我开始了与HTML：

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

请注意，我必须有我的周围输入框的div。为了让我的X展现出来，你需要有一个包装。你会看到会发生什么，当我包括我的CSS：

Notice that I have to have a div surrounding my input box. In order to get my X to show up, you need to have a wrapper. You'll see what happens when I include my 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手柄上的图像的显示方式。最棘手的部分是实际的功能。

The gist is to get an input box, make the face skin transparent, and have the div handle how the image is shown. The tricky part is the actual functionality.

这是我的角度指令：

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

几件事情我想指出。我拒绝做一个$文件，因为我想每一个被彼此隔离的元素。所以，如果你让多个文本框，这不会影响到其他。所有第二，鼠标移动用于创建一个小的窗口，让在上空盘旋，它在X的颜色改变。

Several things I want to point out. I refuse to do a $document on, because I wanted every element to be isolated from each other. So if you make multiple textboxes, this won't affect the other. Second of all, the mousemove is used to create a small "window" to allow the color of the X to change when hovered over it.

下面是的jsfiddle： http://jsfiddle.net/8T27H/2/

Here is the jsfiddle: http://jsfiddle.net/8T27H/2/

在测试了IE7，IE8，IE9，铬，操作，火狐

Tested on ie7, ie8, ie9, chrome, operate, firefox

这篇关于输入文本框：模拟＆QUOT;明文＆QUOT; X按钮就像选择2下拉组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！