IE输入清除图标有时不会触发更改事件答案

【问题标题】：IE input clear icon sometimes not trigger the change eventIE输入清除图标有时不会触发更改事件
【发布时间】：2015-03-11 04:53:15
【问题描述】：

我在我们的项目中使用 AngularJS，我发现 IE 默认在每个输入框上都提供了一个清晰的图标。但是当我单击“X”图标时，不会触发更改事件。

有人可以帮我找到解决此问题的简单方法吗？

它在plnkr中工作，这很奇怪......

$scope.$watch('model.search', function(search){
    console.log(search);
}, true);

http://plnkr.co/edit/U8BMJtBnyK1oxviMV9aL?p=preview

我删除了输入元素中的所有类和分析，它仍然无法触发更改...

提前致谢！

【问题讨论】：

你能给我你的代码吗？
@MrAnonymous 实际上我需要保留“X”图标。
演示成功，我项目中的代码失败...虽然我的输入与演示相同，但找不到原因，也许我应该稍后关闭这个问题，感谢您的帮助@MrAnonymous
我说输入元素完全一样@MrAnonymous，还是失败了……
@MrAnonymous 我没有使用 input::-ms-clear，我真的不知道我的 plnkr 和实际项目有什么区别，抱歉打扰你，我必须在那里犯一些愚蠢的错误，我会找出并删除这个问题。

标签： javascript angularjs internet-explorer

【解决方案1】：

我会通过隐藏此功能不再担心它-

input::-ms-clear {
    display: none;
}

这只是微软推出的无数非标准浏览器功能中的一项，其中包含缺失的功能。

我们的时间太宝贵了。十年来，专门为 IE 编写代码一直很痛苦......

【讨论】：

我以前用这种方式搜索过，但我要求保留“X”图标。感谢您的回复，已经投票了:)

【解决方案2】：

对于那些寻找隐藏清除按钮的替代方法的人，我能够使用以下指令解决此问题。它可能还不完美，所以我欢迎任何反馈:)

angular
    .module('yourModuleName')
    .directive('input', FixIEClearButton);

FixIEClearButton.$inject = ['$timeout', '$sniffer'];

function FixIEClearButton($timeout, $sniffer) {
    var directive = {
        restrict: 'E',
        require: '?ngModel',
        link: Link,
        controller: function () { }
    };

    return directive;

    function Link(scope, elem, attr, controller) {
        var type = elem[0].type;
        //ie11 doesn't seem to support the input event, at least according to angular
        if (type !== 'text' || !controller || $sniffer.hasEvent('input')) {
            return;
        }

        elem.on("mouseup", function (event) {
            var oldValue = elem.val();
            if (oldValue == "") {
                return;
            }

            $timeout(function () {
                var newValue = elem.val();
                if (newValue !== oldValue) {
                    elem.val(oldValue);
                    elem.triggerHandler('keydown');
                    elem.val(newValue);
                    elem.triggerHandler('focus');
                }
            }, 0, false);
        });

        scope.$on('$destroy', destroy);
        elem.on('$destroy', destroy);

        function destroy() {
            elem.off('mouseup');
        }
    }
}

【讨论】：