Question

我在我们的项目中使用AngularJS，我发现默认情况下IE在每个输入框上都提供了一个清晰的图标。但是，当我点击“X＆＃39;图标变更事件不会被解雇。

有人可以帮我找一个解决这个问题的简单方法吗？

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

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

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

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

提前致谢！

Answer 1

我会通过隐藏此功能而停止担心 -

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

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

我们的时间太宝贵了。专门针对IE的编码已经痛苦了十年......

Answer 2

我能够使用以下指令解决这个问题，对于那些寻找隐藏clear按钮的替代方案的人来说。它可能还不完美，所以我欢迎任何反馈：）

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

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

2 个答案: