使用AngularJS綁定處理IE的清除按鈕

Question

IE在每個文本輸入中都有一個“X”，用於清除輸入。 但是，單擊此按鈕時，它會清除文本框，但不會更新輸入綁定的Angular模型。

<input type="text" ng-model="name" />

有關該行為的示例，請參見http://jsfiddle.net/p5x1zwr9/ 。

有關該行為的視頻，請參見http://youtu.be/LFaEwliTzpQ 。

我正在使用IE 11。

編輯：似乎有一個Knockout的解決方案，但我不知道如何將它應用於AngularJS： 使用Knockout綁定處理IE 9和10的清除按鈕

更新： Jonathan Sampson幫助我意識到這實際上在1.3.6之前的AngularJS版本中有效，所以這可能是一個新的Angular bug。

更新：已解決的問題： https ： //github.com/angular/angular.js/issues/11193

Answer 1

輸入表單中的X按鈕是IE10 +的原生，你不能對它做任何事情，但只能用CSS隱藏它：

input[type=text]::-ms-clear {
   display: none;
}

然后，您可以創建自己的指令來模仿這種行為。 只需創建一個跨度，將其放在輸入內部並添加ng-click，這將清除輸入的模型值。

Answer 2

我為輸入文本元素創建了這個Angular指令，當單擊clear（'X'）按鈕時，它手動調用元素的change（）事件。 這解決了我們項目的問題。 我希望它能幫助別人。

angular.module('app')
    .directive('input', function () {
        return {
            restrict: 'E',
            scope: {},
            link: function (scope, elem, attrs) {

                // Only care about textboxes, not radio, checkbox, etc.
                var validTypes = /^(search|email|url|tel|number|text)$/i;
                if (!validTypes.test(attrs.type)) return;

                // Bind to the mouseup event of the input textbox.  
                elem.bind('mouseup', function () {

                    // Get the old value (before click) and return if it's already empty
                    // as there's nothing to do.
                    var $input = $(this), oldValue = $input.val();
                    if (oldValue === '') return;

                    // Check new value after click, and if it's now empty it means the
                    // clear button was clicked. Manually trigger element's change() event.
                    setTimeout(function () {
                        var newValue = $input.val();
                        if (newValue === '') {
                            angular.element($input).change();
                        }
                    }, 1);
                });
            }
        }
    });

感謝這個答案（ 在IE10上用清除圖標清除文本輸入時觸發事件 ），JavaScript代碼檢測到清除按鈕單擊。

Answer 3

我能夠使用以下指令解決這個問題 - 從上面的0x783e的答案派生出來。 它可以提供與更高版本的角度更好的兼容性。 除了ng-change之外，它應該與$ watch或parsers一起使用。

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

Answer 4

使用CSS隱藏而不是'type = text'在搜索字段中使用'type = search'。這樣做只有標記為'type = search'的輸入才會有'X'，但其他輸入仍然會有'X'，這是在IE中的許多其他領域都需要。

input[type=search]::-ms-clear {
   display: none;
}

Answer 5

<input type="text" ng-model="name" id="search" />

This solution works for me

$("#search").bind("mouseup", function(e){
  var $input = $(this),
      oldValue = $input.val();

  if (oldValue == "") return;

  // When this event is fired after clicking on the clear button
  // the value is not cleared yet. We have to wait for it.

  setTimeout(function(){

    var newValue = $input.val();
    if (newValue == ""){
$scope.name="";
$scope.$apply();

    }
  }, 1);

});

Answer 6

我提出的解決方案，雖然沒有立即更新模型，如刪除X並實現自己的解決方案，它確實解決了我需要的。 我所做的就是添加ng-model-options以包含模糊。 因此，當輸入模糊時，它將更新范圍值。

<input type="text" ng-model="name" ng-model-options="{ updateOn: 'default blur'}"  />