CODEWITHSUNDEEP
javascriptangularjsinternet-explorer
huan feng
huan feng

Reputation: 8623

IE input clear icon sometimes not trigger the change event

I'm using AngularJS in our project and I find IE provides a clear icon on every input box by default. But when I click the 'X' icon the change event won't be fired.

Can someone kindly help me find a simple way to solve this issue?

It worked in plnkr, it's very weird...

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

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

I remove all the class and analytics in the input element, it still can not trigger the change...

Thanks in advance!

Upvotes: 0

Views: 1500

Answers (2)

Tim Mac
Tim Mac

Reputation: 1149

I was able to solve this using the following directive, for those looking for an alternative to hiding the clear button. It may not be perfect yet, so I welcome any feedback :)

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

Upvotes: 1

ThiagoPXP
ThiagoPXP

Reputation: 5462

I would stop worrying about it by hiding this feature-

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

That is just one more of countless non-standard browser features that Microsoft introduce that contain missing functionality.

Our time is too precious. Coding specifically for IE has been a pain for a decade...

Upvotes: 5

Related Questions