输入文本框:模仿“明文"；X 按钮就像 select2 下拉组件 [英] input textbox: mimic "clear text" X button just like select2 dropdown component

问题描述

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

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

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

我能找到的最接近的功能控件在这里:从输入中清除搜索词字段.，他在这里给出了一个演示.

这样做有两个缺点:

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

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

解决方案

这是我想出的解决方案:

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

我从 html 开始:

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

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

.clearable{显示:内联块；*显示:内联；缩放:1；高度:30px；}.clearable 输入{向左飘浮;背景:透明；游标:指针；}.clearable.x{背景:透明 url(../themes/base/images/clearText-dark.png) 无重复 95% 中心；}.clearable.onX{背景:透明 url(../themes/base/images/clearText-light.png) 无重复 95% 中心；}

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

这是我的角度指令:

app.directive('clearText', function () {var 指令定义对象 = {链接:功能链接(范围，元素，属性){element.addClass("clearable");函数 tog(v) { 返回 v ?'addClass' : 'removeClass';}element.keyup(函数(){element[tog(element.children('input[type=text]:only-child').val())]('x');}).mousemove(函数(e){e.preventDefault();如果 (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(函数(e){e.preventDefault();如果 (element.hasClass('onX')) {element.removeClass('x onX');element.children('input[type=text]:only-child').val('');}});}};返回(指令定义对象)；}]);

我想指出几点.我拒绝对 $document 进行处理，因为我希望每个元素都相互隔离.所以如果你制作多个文本框，这不会影响另一个.其次，mousemove 用于创建一个小窗口"，以允许 X 悬停在其上时更改颜色.

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

在 ie7、ie8、ie9、chrome、operating、firefox 上测试

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/

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.

There are two downsides to this:

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:

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.

I start out with the html:

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

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

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.

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

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.

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

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

这篇关于输入文本框:模仿“明文"；X 按钮就像 select2 下拉组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！